Develop Reference

Microsoft.Maps.SDKMap is undefined, when creating object in BingMaps V8

While creating bingmap instance, SDKMap is undefined. Is there any missing credentials in following code?
function GetBingMap(){
var vcredentials = "<%=this.credentialKey%>" //credential Key
var vzoomLevel = Number("<%=this.zoom%>"); //Zoom Level
// Create the Map instance
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), //div map load
{
credentials: vcredentials, //credential
zoom: vzoomLevel, //zoom level
showZoomButtons: false, // enable Zoom Buttons
showLocateMeButton: false, // show Locate me button
showMapTypeSelector: false,//enable Map type selector
showScalebar: false,//enable scale bar
showTermsLink: false//enable terms link
});
this.map= map;

Make sure that the Bing Maps source code has loaded before calling your GetBingMap function. It sounds like it hasn't fully loaded before your code tries to create a map instance. If you are using async/defer in the script reference in the script tag, remove it.

How to add markers to leaflet map with tabletop.js?

I'm using this quite nice guide to add markers from a Google sheet to a basic leaflet.js map:
https://rdrn.me/leaflet-maps-google-sheets/
The problem is, using these code snippets here i get all the data logged and returned in the console, but none of the points appear on the map itself.
This is probably some really basic JavaScript issue that i'm not able to see. Sorry, still learning.
Here's a jfiddle, linking to a demo sheets with one marker point
https://jsfiddle.net/xfs19cz7/1/
with the map part:
function init() {
Tabletop.init({
key: '*url to gsheets here*',
callback: myFunction,
simpleSheet: true
})
}
window.addEventListener('DOMContentLoaded', init)
function myFunction(data, tabletop) {
console.log(data);
}
var map = L.map('map-div').setView([64.6220498,25.5689638], 5);
var basemap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Basemap (c) OpenStreetMap',
minZoom: 5,
maxZoom: 18
});
basemap.addTo(map);
function addPoints(data, tabletop) {
for (var row in data) {
var marker = L.marker([
data[row].Latitude,
data[row].Longitude
]).addTo(map);
marker.bindPopup('<strong>' + data[row].Info + '</strong>');
}
}
This should add one point to a basic map. Now actually the map is not at all rendered, and no marker shows up. I can't find any issues in the code making the map show up blank, but there probably are some.
The marker from gsheets is however logged in the console, i suspect there is something missing in my code relating to really basic javascript functions / looping / sloppy syntax.
Also tried the init() and addPoints(data, tabletop) parts to a map i had where the map with the same basemap link, which rendereded OK. Adding this still left the map rendering, but no markers showed up. Again, the gsheets was loaded as an array of objects.
Could anyone point me to this, probably very basic, issue in the code?
edit:
callback: myFunction,
line above needs to be changed to
callback: addPoints,
also, init function needs to be called and position set to absolute. Thanks for the working fiddle in answer marked as correct below.

Fixes
Try setting map position absolute
calling the init() function
Working fiddle

What would make a Google map Ag object returned without mapDataProvider?

I'm working on an SPA project (ionic, so it's angular with ui-router) where I need to display two different maps on two different pages/controllers.
The first map is a general map (let's call it the main map)where a few locations are marked and the second one (let's call it the edit map)is a focus on a specific location where the user can edit the location by dragging the marker.
The general implementation scheme I'm using is that I'm calling a initMap method from mappingService that instanciates a google map from each controller.
$rootScope.markers = [];
this.initMap = function initMap(mapTarget, mapCenter) {
// the initMap function initialize the map it takes two arguments:
// + mapTaget which defines the html element the map is bound to.
// + mapCenter that defines the center of the map and whether to display the center
var markup = "<div id='" + mapTarget.mapId + "'></div>";
document.getElementById(mapTarget.containerId).innerHTML = markup;
var centerPos = new google.maps.LatLng(mapCenter.lat, mapCenter.lng);
$rootScope.map = new google.maps.Map(document.getElementById(mapTarget.mapId), {
center: centerPos,
zoom: 18,
disableDefaultUI: true
});
// eventually place a person marker for the user's position
if (mapCenter.display) {
console.log('placing the position marker');
$rootScope.markers[0] = new google.maps.Marker({
position: {lat: mapCenter.lat, lng: mapCenter.lng},
map: $rootScope.map,
title: 'userLocation',
icon: './img/person_icon.png'
});
}
};
The only difference is that on the main map I'm first calling a geolocate service the return a promise and I'm using the returned location coordinates to then call the mapping service:
geolocateService.getLocalPosition()
.then(function(coords) {
mappingService.initMap(
{containerId: $scope.mapContainer, mapId: $scope.mapId},
{lat: coords.lat, lng: coords.lng, display: true}
);
While on the edit map I'm calling directly the mapping service.
mappingService.initMap(
{containerId: $scope.mapContainer, mapId: $scope.mapId},
{lat: $scope.location.lat, lng: $scope.location.lng, display: false}
);
I am able to render both maps without problem and even to add markers and some event listeners.
However, I run into the problem that after some sequence of actions, for example going from the main map to the edit map two times, one of the map would suddenly become blank (white to be exactly, so it doesn't seems to be something that I could solve by resizing the map). I'm receiving the Ag object and the only difference is that I don't get the mapDataProviders property on the broken map.
When it works, I get:
Ag object when it works
While when it doesn't, I get:
Ag object when it doesn't work
The code snippet above is my last implementation attempt. I've been trying to implement those maps from a lot of different ways to no avail. Among those attempts, I tried:
totally separates both instanciation, dividing the initMap methods into an initMainMap and an initEditMap.
using one instance for both maps and replacing the DOM element> This is what you see above with the following additional method that is called when leaving the view:
this.removeMap = function removeMap(containerId) {
var container = document.getElementById(containerId);
$rootScope.markers = [];
container.innerHTML = '';
// important part:
var old_element = container;
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);
delete $rootScope.map;
}
knowing that on both views I have either:
or
<div id="edit-map-container"></div>
I'm trying to understand what would make the google map API return a map without mapDataProvider (which I believe means that the map works and even starts to render except that it lacks the tiles to display).
P.S. it looks like there is a memory leak, which is apparently a well known issue.
If anyone has the answer to this, I'm a bit lost right here!

Google Maps API - Map.data scope issue

I am trying to add a GeoJSON layer to Google Maps (v3) by doing the following:
imageActive = {
url: "images/target_red.png",
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(11, 11),
} // ACTIVE marker image
jQuery.getJSON('home/gcpts/geojson.php', function(data){
points = map.data.addGeoJson(data);
console.log(points); //this works
});
map.data.setStyle({
clickable: true,
draggable: false,
});
map.data.addListener('click', function(event){
setActiveImage(event);
})
function setActiveImage(event){
for(var i = 0;i<points.length;i++){ //can't read "length" of undefined
points[i].revertStyles();
}
map.data.overrideStyle(event.feature, {
icon: imageActive,
});
}
However when I try to iterate through the "points" variable, I can't seem to "see" it. I mainly get undefined, or if I try to call the length of points (points.length), then it doesn't exist.
If I console.log(points) within the jQuery function, then I can see all of the features within the variable. If I place it on the outside, then I can't see it. Is there something I am missing about the scope?
It's my hope that I can set a "click" event and use event.feature to overrideStyle. Then when a different feature is clicked, then the style is removed from the other geoJson features and overrides the newly clicked feature.
It seems that this should work fine, but I can't seem to figure out how to iterate through the features.
Thanks!
(Also, I am using jQuery in "No conflict" mode...)

All of your variables are globally scoped because you aren't using the var keyword. It seems likely that some other script is looking for a points variable and overwrites yours. Assuming your code is already wrapped up in some kind of function (such as a jQuery ready handler), you may solve your problem by just using var. I'd add this line of code before you call getJSON():
var points = [];

The previous answer noted you need to ensure your "points" variable is scoped appropriately, but a better answer is that you don't need that variable at all: Since you are using map.data you can just use that directly to access your features, using something like:
map.data.foreEch(function(feature) {console.log(feature);})
Note of course your "map" variable must be appropriately scoped.
Additionally, you also don't need to use jQuery -- you can just load the data using map.data.loadGeoJson(theUrl) which will do the ajax for you

leaflet js: draw POIs as canvas

I want to draw many geo points with Leaflet. Therefore I want to use HTML5 canvas to improve the performance.
My datasoure is geoJSON. As I saw in the documention of Leaflet, it is not possible to draw the geo positions as canvas yet.
var anotherGeojsonLayer = new L.GeoJSON(coorsField, {
pointToLayer: function (latlng){
return new L.Marker(latlng, {
icon: new BaseballIcon()
});
}
});
I think I should hook up here:
pointToLayer: function (latlng) { }
Does somebody know how to draw my latlng objects as canvas?

I'm Leaflet author. You can do this by using L.CircleMarker instead of regular Marker, and also using an experimental L_PREFER_CANVAS switch to render vectors as Canvas (instead of SVG), like this: https://github.com/CloudMade/Leaflet/blob/master/debug/vector/vector-canvas.html

Expanding on the original answer in case anyone needs this for Leaflet 1.0. You should still use L.circleMarker() (Leaflet circleMarker documentation) instead of L.marker(), but the way to use the canvas has changed.
In Leaflet 1.0, the experimental L_PREFER_CANVAS switch has been upgraded to an official map option preferCanvas (Leaflet preferCanvas documentation).
var map = L.map('mapid', {
preferCanvas: true
});
Alternatively, you can explicitly set the canvas renderer; I think this does the same thing as the preferCavas option. Here's the Leaflet documentation for canvas.
var map = L.map('mapid', {
renderer: L.canvas()
});
Either of these options (preferCanvas: true or renderer: L.canvas()) with L.circleMarker() was significantly faster than a regular layer using L.marker().