back to notes

Bing Maps code: Geojson + polygon + OpenData

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
center: new Microsoft.Maps.Location(-31.954555, 115.866375),
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
zoom: 4

});
var infobox = new Microsoft.Maps.Infobox();
infobox.setMap(map);
infobox.setOptions({ visible: false, maxHeight: 400, maxWidth: 400 });
infobox.setMap(map);

Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
Microsoft.Maps.GeoJson.readFromUrl('https://opendata.arcgis.com/datasets/1120892aeccc4ce4989be5b4805d39e6_11.geojson', function (polygon) {
map.entities.push(polygon);
Microsoft.Maps.Events.addHandler(map.entities, 'click', function (args) {
infobox.setOptions({
location: args.target.getLocation(),
title: args.target.metadata.Title,
description: args.target.metadata.Title + '<br/><br/>' + args.target.metadata.href + '<a href="' + args.target.metadata.href + '">' + args.target.metadata.Title + '</a>',
visible: true
});
});
});
});


_____________________________________________________________


Polyline:





var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
center: new Microsoft.Maps.Location(-31.954555, 115.866375),
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
zoom: 4

});
var infobox = new Microsoft.Maps.Infobox();
infobox.setMap(map);
infobox.setOptions({ visible: false, maxHeight: 400, maxWidth: 400 });
infobox.setMap(map);

Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
Microsoft.Maps.GeoJson.readFromUrl('https://opendata.arcgis.com/datasets/6476f0367ff445b7b1b123343f53502f_24.geojson', function (polyline) {
map.entities.push(polyline);
Microsoft.Maps.Events.addHandler(map.entities, 'click', function (args) {
infobox.setOptions({
location: args.target.getLocation(),
title: args.target.metadata.Title,
description: args.target.metadata.Title + '<br/><br/>' + args.target.metadata.href + '<a href="' + args.target.metadata.href + '">' + args.target.metadata.Title + '</a>',
visible: true
});
});
});
});


__________________________________________________________________


Had Custom Text to a map at coordinates:



var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="500" height="40" viewBox="0 0 500 40"><text x="0" y="35" font-family="Verdana" font-size="35">Hello, out there</text></svg>',
anchor: new Microsoft.Maps.Point(25, 25) });
map.entities.push(pushpin);


_________________________________________


'How to add text a custom coordinates with visibility range set':




var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
center: new Microsoft.Maps.Location(43.7, -79.3834),
zoom: 2

});

//Create a layer
var layer1 = new Microsoft.Maps.Layer();

//Add zoom information as metadata of the layer.
layer1.metadata = {
zoomRange: { min: 1, max: 1 }
};

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(43.809913, -79.386212), { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="500" height="40" viewBox="0 0 500 40"><text x="0" y="35" font-family="Verdana" font-size="35">Hello, out there</text></svg>',
anchor: new Microsoft.Maps.Point(25, 25) });

//Add pushpins
layer1.add((pushpin));

//Add layer to map.
map.layers.insert(layer1);


//Add a viewchangeend event to the map so that it updates the visibility of the layers.
Microsoft.Maps.Events.addHandler(map, 'viewchangeend', updateLayerVisibility);

//Do an initial update of the visibility.
updateLayerVisibility();


function updateLayerVisibility() {
//Get the current zoom level of the map.
var zoom = map.getZoom();
var layer;

//Loop through the layers in the map and check to see if it has zoomRange metadata.
for(var i=0;i<map.layers.length;i++){
layer = map.layers[i];

if(layer.metadata && layer.metadata.zoomRange){
if (zoom >= layer.metadata.zoomRange.min && zoom <= layer.metadata.zoomRange.max) {
layer.setVisible(true);
} else {
layer.setVisible(false);
}
}
}
}