mapgears / ol3-google-maps Goto Github PK
View Code? Open in Web Editor NEWOpenLayers - Google Maps integration
License: Other
OpenLayers - Google Maps integration
License: Other
I have two maps to be used on my site
the first map is used for editing such geometries, inserting polygons, etc.
the second map is used for viewing only and it is in a different location on the the site from the first map
BTW, im only using localhost and this is what the AuthenticationSerivce.Authenticate
/**/_xdc_._kif0ek && _xdc_._kif0ek( [1, null, 0] )
0: 1
1: null
2: 0
P.S.
Sorry if this lacks, but i can edit this. My first time seeking help on github since ol3gm is only available here.
Hi!
This is just a suggestion in case there are others out there wanting something similar.
The application my firm is working on uses Clusters and styles currently not supported by ol3-google-maps. We, therefore, decided to disable watchlayers for Tiles, Images, and ImageWMS as we want to keep OL3 layers. Of course, this will make the OL3 layers lag during zoom and when moving around in the map. However, we are able to keep all styling we have defined without the need for making big changes in our ol3-google-maps fork.
We defined a watchFeature object which is an optional parameter passed to olgm.OLGoogleMaps:
var watchFeatures = options.watchFeatures !== undefined ?
options.watchFeatures : {image: true, imageWMS: true, tile: true};
It is further passed down to olgm.layers.Herald, and used to disable the different watchlayers as below:
olgm.herald.Layers.prototype.watchLayer_ = function(layer) {
if (layer instanceof olgm.layer.Google) {
this.watchGoogleLayer_(layer);
} else if (layer instanceof ol.layer.Vector && this.watchVector_) {
this.vectorSourceHerald_.watchLayer(layer);
} else if (layer instanceof ol.layer.Tile && this.watchFeatures_.tile) {
this.tileSourceHerald_.watchLayer(layer);
} else if (layer instanceof ol.layer.Image && this.watchFeatures_.image) {
var source = layer.getSource();
if (source instanceof ol.source.ImageWMS && this.watchFeatures_.imageWMS) {
this.imageWMSSourceHerald_.watchLayer(layer);
}
}
};
If the option is wanted, we would gladly submit a PR on it.
We also had to disable geometry event listeners on features in featureherald.js. This is probably due to our use of custom features.
Hello! In the map I'm maintaining I'm using 3 google map layers, one with ordinary map type, one with satellite map type, and one with hybrid map type. For the record, I'm using ol3-layerswitcher (https://github.com/walkermatt/ol3-layerswitcher) to switch between these.
For the satellite and hybrid map type, Google supports high-res "tilted" imagery for zoom levels over a certain treshold (I believe it is 19), for some areas in the world. This is turned on by default, and I would like to turn it off.
As this (https://developers.google.com/maps/documentation/javascript/maptypes) page says:
You can disable 45ยฐ imagery by calling setTilt(0) on the Map
object.
Then the question becomes; how do I access the map
object? Meaning the google.maps.Map
object behind the OpenLayers 3 google map layer type.
Hi everyone.
I'm trying to get a map using your library 0.6 that contain OL3, but i just cant get it worked.
Not sure this is the place to ask for help, but i'll only know it by trying si here's my problem.
I'm giving the sources to my page this way:
link rel="stylesheet" href="/jscript/OpenLayers-3.16/css/ol.css" type="text/css"/>
link rel="stylesheet" href="/jscript/ol3-google-map/css/ol3gm.css" type="text/css"/>
script src="myapikey"> /script>
script src="/jscript/ol3-google-map/src/ol3googlemaps.js"> /script>
I load a js script of mine that countain the initialisation and stuff in order to create the map after my "div id='map'> /div>" to be sure there is no loading issue but still i got the following error when he first tries to create the map:
'ReferenceError: ol is not defined'.
Could anyone help me please?
Cheers.
EDIT: Removed all the '<' because the editor doesnt seem to like it.
The LayersHerald class is starting to get very heavy, especially with the addition of WMS layers. There are currently multiple methods that look like they could be split into a different file. For example, for each layer type we support, we have the following functions:
plus some handlers and cacheItems.
With Ol3-Google-Maps v0.4 the vector layer is not visible with OSM, also in your examples (concept, vector etc.).
Hello, I have an application that uses OpenLayers 3 and for what Ive been searching, Google Maps is not officially supported by ol3.
is it possible to add the google traffic layer to ol3 with this library?
Someone has tried it?
Thank you in advance.
It's perfect extension for OL3 thanks a lot! But when I navigate with mobile browser it's not smooth like OL3. Is there anything to do for it?
http://dev5.mapgears.com/ol3-google-maps/examples/simple.html
Check it from offical demo
Hi! Has anyone here used ol3-layerswitcher
together with ol3-google-maps
? For some reason the google layer doesn't show correctly in my layer switcher:
Relevant pieces of code:
var map = new ol.Map({
target: 'map',
});
var googleLayer = new olgm.layer.Google({
title: 'Kart (Google)',
type: 'base',
})
map.addLayer(googleLayer);
var shadedBing = new ol.layer.Tile({
title: 'Kart (Bing)',
type: 'base',
source: new ol.source.BingMaps({
key: bingKey,
imagerySet: 'Road'
})
});
map.addLayer(shadedBing);
...
map.setView(new ol.View({
projection: 'EPSG:900913',
center: ol.proj.transform(
settings.coords,
'EPSG:4326',
'EPSG:900913'
),
zoom: 14
}));
var layerSwitcher = new ol.control.LayerSwitcher({});
map.addControl(layerSwitcher);
var olGM = new olgm.OLGoogleMaps({map: map});
olGM.activate();
Any thoughts?
Hi I have using your olgm.js v0.4, why google map doen't load automatically like the previous v.02 which I use. althought I have use your suggetion to add ๐
window.setTimeout(function () { var olGM = new olgm.OLGoogleMaps({map: map}); // map is the ol.Map instance olGM.activate(); }, 1000);
How can I get olgm.js without compiled to .min.js?
Thanks
Thanks for making such a useful library.
I am trying the Openlayers 3 clustering example using this library in Google Maps.
While styling the clusters, i printed the feature object .
It prints 3 times.For first time it comes out to be undefined but right in the next two times.
This causes the following error in line ( var size = feature.get('features').length; )
Uncaught TypeError: Cannot read property 'get' of undefined
Due to this, the clusters are drawn on map but the code after clusters does not execute.
style: function(feature, resolution) {
console.log(feature);
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
style = [new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#3399CC'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
})];
styleCache[size] = style;
}
return style;
}
It works fine without the library.
Also, upto what time will you support images as markers.
I plotted marker images on map but they are not hidden when i switch them off from layer switcher.
For a working routing application we need access to the former mapObject variable. Can you add such a function so that from the layer object we can receive the Google Maps object?
baseMap = new olgm.layer.Google({
title: "Google", name: "google", visible: true
});
baseMap->getMapObject(); OR baseMap->getGoogleObject();
As you may know, with open layers you are allowed to create an array of styles and to use it on a feature.
var myStyle = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({
color: 'rgba(0,120,30,1)' //dark green
})
})
//!\ "file:///" images will block the printing of the map
//see http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules
//image: new ol.style.Icon(({
// anchor: [0.5, 1],
// anchorXUnits: 'fraction',
// anchorYUnits: 'fraction',
// src: "images/anemometer_mono.png",
// crossOrigin: 'anonymous' //you need this if you fetch images from another website
//}))
}),
new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'rgba(230,120,30,1)' //orange
})
})
})
];
var f = xxx;
f.setStyle(myStyle);
this is causing an issue with ol3-gm, probably inside olgm.gm.createStyleInternal because you are not handling this case.
Hi,
If you download the 0.4 release, the version inside the file is: v0.3-30-ge68acc0
Do you think it would be possible to update the version number and correctly match the release number in releases ?
Thanks.
OLGM can be configured to not "manage" vector layers, i.e. instead of making them render in Google Maps directly, they stay in OpenLayers.
This has the down-side of making the animation while zoomin in/out not synchronized between OL and GM, but for some users it may still be better than nothing.
The task at hand is to create an example featuring a vector layer not managed by OLGM. In it, we could put some interesting displays of features that are cool in OL, but not yet managed in OLGM, such as clusters.
When we're zoomed out far enough, we start to see the earth multiple times. When that happens, Google Maps checks for tiles in coordinates outside the normal earth bounds. We build a request url using these coordinates without making sure they fit in the map. This request often returns errors, such as in the XYZ layer example. The objective is to find the appropriate tile coordinate for tile coordinates outside the world's bounds.
I'm trying to layer an OpenWeatherMap tileset on top of Google Maps with limited success. I came across this repository and got excited! But I see now that listed in the limitations ol.layer.Tile
is not supported.
I'm trying to use ol.source.XYZ
as the source of the layer. What is the timeline for adding Tile support? Also, do you know if this is possible to achieve with the standard OpenLayers API? I've gotten the tiles layered on top using the standard OL API, but I haven't been able to keep Google Maps and OL in sync. (they become off when you scroll around at different zoom levels).
Any help would be greatly appreciated! Also, thank you for maintaining this repository--dealing with these tools can be difficult with such sparse up-to-date documentation. Thank you!
In my project, I use a data to create point just like
http://openlayers.org/en/v3.7.0/examples/earthquake-clusters.html
when the layer is OSM or Mapquest ,which is OK.
but when I use the google layer, in create first point,
my function cannot get the feature,
so I cannot use size to create point and the text on it
Is anyone can help me
Sorry about my terror English
The task at hand is this: upgrade OLGM to use OpenLayers v3.16.0.
It looks like rotation should be disabled if it cannot be set on the Google Map. Currently, if you use the rotate interaction, panning becomes weird.
Nice work on this!
We currently load the externs for Google Maps API v3.21, but the stable version is now at v3.24. Even when we specify to load v3.21 in the examples, it still loads v3.24, so we need to update the examples and the externs to that version. We will also need to do that for each new major stable release.
Link to the externs for each version: https://github.com/google/closure-compiler/tree/master/contrib/externs/maps
The task at hand is to support WMS layers in OLGM. The idea is to let GoogleMaps render those layers instead of OpenLayers for a perfect synchronization while interacting with the map.
The implementation needs to be discussed..
Hello,
when i load for the first time my olgm map, appear in console these errors
"ol3gm.js:400 Uncaught TypeError: Cannot read property 'r' of undefined"
and
"ol3gm.js:244 Uncaught TypeError: d.getStroke is not a function"
and the dots of polygon on layer are very bigger than normal.
I think probably it's link on a centroid problem on ol.js (row 10811):
l.Nc = function(b) {
vp(this, b);
this.k()
};
What is the problem?
How can i fix it?
In olgm.OLGoogleMaps
one can set the watchVector
option.
The default is set to true
, but if you set it to false
and the google layer is visible the vector layers are not included in google map and the opacity of vector layers becomes 0.
I think that for the case where watchVector
is false
the opacity of vector layers should remain 1 or that of the initial opacity.
This (watchVector false and opacity 1) can be a temporary solution for #35
Hi!
First of all thanks for your nice work.
Do you know if there's a limitation in having Google layer in the Overviewmap?
I could not succeed in doing the above in the Overview examples from ol3 examples.
Thanks a lot!
Lucian
Hi! I'm trying concept example but it seems that is not working!
Failed to load resource: the server responded with a status of 404 (Not Found) concept.js:142 Uncaught ReferenceError: olgm is not defined
Line 89 of the HTML: <script src="/@loader"></script>
Hello,
please look at https://www.dreiharden.net/proxy/maps/dreiharden/
Change base map at top right to "Luftbild" and you'll see that the vector layer for POIs is now under all other layers. Clicking back to normal base map "Karte" all things are fine.
index 5, name markerpois, z-index 1000
index 4, name map4, z-index 10
index 3, name map3, z-index 10
index 2, name map2, z-index 10
index 1, name map1, z-index 10
index 0, name google, z-index 0
So, POIs are on top of z-index and last in rendering chain of OL3. But for google satellite it's under other WMS layers.
Please help fixing that. Thanks in advance.
jsfiddle where everything works as it should: https://jsfiddle.net/penn/mLrwbtj9/ (note that it takes a while to load due to slow bandwith on the server (orionhub.org) hosting the assets).
What the script does is to paint all the coordinates inside the coordinates
array as green circles (ol.style.Circle) immediately, then another layer with red circles are painted on top, with a 100ms circle delay of every red circle painted.
Now, if I swap the circle with an icon (ol.style.Icon
), some of the icons gets painted, some do not, as illustrated in this other jsfiddle: https://jsfiddle.net/penn/8krh3hz4/
The only thing that is changes is that I use Icon
instead of Circle
.
Am I doing something wrong, or is this a known or unkown bug?
PS: Here is the example using ol.style.Icon
and OpenStreetMap instead of ol3-google-maps (it works): https://jsfiddle.net/penn/90va4vws/
Dear,
I have implement your google code in my map. Why there is problems with zoom ar and point position display. Please help me to solve it.
my link : http://map.setiabudi.co.id/examples/test/map.html
source link : http://map.setiabudi.co.id/openlayers3-9.rar
Please help me to solve it..
wating for your reply..thx
I created icon feature with text style and some text inside style.
Icon and label are on map.
After few second I do so:
var st = marker.getStyle();
st.getText().setText("");
marker.setStyle(st);
Label on google layer stay the same, but if I choose OSM or MapQuest label disappears
Hi,
I think it would be nice if RegularShape could be developed in order to correctly be displayed in ol3-google-maps. Actually, the RegularShape were displayed in a different z-index so the user will never see them (unfortunately).
Thanks
Upgrade OLGM to OL3 v3.15.0.
When I run make
, i get a help page with a list of commands, e.g. make dist
. When I try make dist
which does "Create a distribution for the library (dist/ol3gm.js)" (from the help page), the command fails:
$:~/../ol3-google-maps$ make dist
(cd ol3 && npm install && node tasks/generate-externs.js build/ol-externs.js)
# ... npm install, populating node_modules ...
module.js:339
throw err;
^
Error: Cannot find module '/.../ol3-google-maps/ol3/tasks/generate-externs.js'
at Function.Module._resolveFilename (module.js:337:15)
at Function.Module._load (module.js:287:25)
at Function.Module.runMain (module.js:467:10)
at startup (node.js:134:18)
at node.js:961:3
make: *** [ol3/build/ol-externs.js] Error 1
And quite right, ol3/tasks/generate-externs.js
does not exist. In fact, the ol3
folder is empty.
Am i doing something wrong here, or is the make tools broken?
Hi there.
I'm using ol3-google-maps version 0.6 ands it's working just fine. I got my map and it's great.
But now i need to use proj4js (or something similar) in order to use and convert some projections (EPSG:27572 for instance) but it's not working. When i try to add a new projection to proj4, i got the following error:
ReferenceError: proj4 is not defined
I just cant get why and i didnt find any similar issue except for people using OpenLayers 2.x and Proj4js 2.x which i'm not.
Here's how i include my src:
<link rel="stylesheet" href="/jscript/OpenLayers-3.16/css/ol.css"type="text/css"/>
<link rel="stylesheet" href="/jscript/ol3-google-map/ol3gm.css" type="text/css"/>
<script src="myapikey"> </script>
<script src="<c:url value="/jscript/ol3-google-map/ol3gm.js"/>"> </script>
<script src="<c:url value="/jscript/proj4js-2.3.js"/>"> </script>
And i'm adding the projection like this:
proj4.defs("EPSG:27572", "+proj=lcc +lat_1=46.8 +lat_0=46.8 +lon_0=0 +k_0=0.99987742 +x_0=600000 +y_0=2200000 +a=6378249.2 +b=6356515 +towgs84=-168,-60,320,0,0,0,0 +pm=paris +units=m +no_defs");
I just have no idea where to look for to resolve that problem, being pretty new to every tool i'm using. It might just be a stupid thing i'm doing and i apology in advance if it is.
Best regards.
Hi-
I've read the rotate limitation, and see that its not currently supported. I'm relatively new to Openlayers 3, and don't fully grasp the limitations with Google maps. We have an immediate need for OpenLayers, Google maps, and map rotation. Therefore, we are willing to sponsor (pay for) the solution, if someone here can add the rotate functionality?
When running make dist
for the first time, we get the following error:
info ol3-google-maps Parsing dependencies
info ol3-google-maps Compiling 39 sources
ERR! compile ERROR - Cannot read: node_modules/openlayers/build/ol-externs.js
ERR! compile
ERR! compile
ERR! compile 1 error(s), 0 warning(s)
ERR! compile
ERR! Process exited with non-zero status, see log for more detail: 1
make: *** [dist/ol3gm.js] Error 1
Running the same command thereafter works as expected. It would be nice to fix this issue.
We should upgrade to the latest version of OpenLayers, as soon as this fix is in a release: openlayers/openlayers#5565
Hi I use your google, why it return error when I use heat map? how to fix this error..This error not found when I disable google map...thanks
On the concept example, if you drag and drop one of the markers on the "repeating" maps on the sides, you can't move it anymore.
Hi! OpenLayers 3 with ol3-google-maps doesn't seem to work so good in Internet Explorer 10 and 11 when using shift-drag to create "zoom boxes" in the maps. When doing so with ol3-google-maps enabled, stuff around the map are marked, have a look: (IE 10 demo)
https://v.usetapes.com/stuehmgYvX
Any pointers on what might cause this? This is a bummer for my project, as Internet Explorer (sadly) is a required client.
anchorXUnits/anchorYUnits value fraction
seems to be the same as omitting anchor
, it doesn't do anything. Is the mapping between OpenLayer controls and Google Map controls taking these parameters into consideration?
For example, with an anchor of [10,10]
and anchorXUnits
/anchorXUnits
set to fraction
, the icon the style is applied to should be placed pretty far above to the left of the coordinate origin, which is the case in "native" layers types like Bing Maps, but in the ol3-google-maps google layer, nothing gets changed:
// the anchor is here only applied to non-google layers
var style = new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [10, 10],
anchorXUnits: 'fraction',
anchorXUnits: 'fraction',
src: '/app/images/map_focus.gif'
}))
The purpose of this task is to be able to define cluster styling in OL3 and be able to reproduce the behaviour in GoogleMaps.
At this point, no research nor development has been made towards achieving this and it's not guaranteed to be even possible. The first step would be to analyse the possibility to do this and come with an implementation plan.
Opened for discussions.
OpenLayers v3.14.0 is out: https://github.com/openlayers/ol3/releases/tag/v3.14.0
The task at hand is to upgrade OLGM to use that version.
I am trying to highlight some features from a layer (ol.source.TileWMS) after drawing a box. I have found the following problem:
*) I can highlight the features (using ol.interaction.Select and pushing the selected features) but the selection does not refresh/sync/move when the map is resized (see attached screenshots, there are 2 dots highlighted in blue), and therefore ends up in the wrong place (shifted)
Please help.
How to do google place autocomplit with this lib?
Hi!
I am currently working in a software firm which greatly appreciates ol3-google-maps. However, we had problems building on Windows. We fixed it by following a proposed solution discussed here, which have been integrated into OL3.
If wanted, we would gladly submit a PR to fix the issue, as it may be of interest to future developers.
Create the v0.6 release, which must include OpenLayers v3.16.0 (#72).
It would also be nice to have a documentation detailing the steps required to create a new release, either in a wiki page or in a readme file.
Hi,
I'm the maintainer of the Openlayers module for Drupal.
A lot of people are requesting Google Maps layers in the module and I would like to use this library.
Could you please provide regular release of the library and their Openlayers library requirements so I can work on something ?
Thanks.
Currently, when an OL3 vector layer visibility is unset, the data in Google Maps is still being shown.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.