[SOLVED] GoogleMaps Extension Add OSM (Open Street Map)

Answered
0
0

Hi,

In Visual WebGUI I was able to add OSM to the GoogleMaps Extension doing the JS code below.  This would default to OSM for the map tiles.  How would I do this in Wisej?

 var mapTypeIds = [];
for (var type in google.maps.MapTypeId) {
mapTypeIds.push(google.maps.MapTypeId[type]);
}
mapTypeIds.push(“OSM”);
    mobjMapObject = new google.maps.Map(mobjMapElement, {
center: new google.maps.LatLng(30.1238660, -92.0706730),
zoom: 6,
mapTypeId: “OSM”,
gestureHandling: “greedy”,
mapTypeControlOptions: {
mapTypeIds: mapTypeIds
}
});
    mobjMapObject.mapTypes.set(“OSM”, new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
return “http://tile.openstreetmap.org/” + zoom + “/” + coord.x + “/” + coord.y + “.png”;
},
tileSize: new google.maps.Size(256, 256),
name: “OpenStreetMap”,
maxZoom: 18
}));
Thanks,
Tim
  • You must to post comments
Best Answer
2
0

You can do that in several ways.

1. is to modify the GoogleMaps extension and add the map type to startup.js in the init() function.

2. Without modifying the extension, is to add a JavaScript component to the page (in Wisej 2 you don’t need the JavaScript component and you can use the new ClientEvents property), and add a JavaScriptEvent to the map control for the “initialized” event whit this code:


this.map.mapTypes.set("OSM", new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
        return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
    },
    
    tileSize: new google.maps.Size(256, 256),
    name: "OpenStreetMap",
    maxZoom: 18
}));

this.map.setMapTypeId("OSM")

See screenshot attached.

Attachment
  • Tim Larson
    Could you possibly send me the sample you made the pic from? I don’t see an ‘initialized’ event under the clientevents property. timlarson{AT}poetep.com Thanks, Tim
  • Luca (ITG)
    The list is for convenience for the most common events. There are hundreds of javascript events available and they are not all supported by all widgets and many are fired by custom code. You can type the event name in the field instead of using the drop down options.
  • Adrian Zagar
    It doesn’t seem to work. I added the JavaScript component to the custom control (initialized ClientEvent) but still Google maps is used. Can you please attach a working sample?
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.