techinplanet staffAsked By: Anonymous
I am trying to add a marker to a specific point on a button click event, on a map using Polymer 1.0 and the leaflet-map web component – github link. My code works as expected in Chrome, but in Firefox 41.0.1 I get an error :
“TypeError : t is null”
(referencing leaflet.js page), and the marker does not display.
Here is the Javascript, in the button’s registration:
var parent = document.getElementById('nycmap');
nycmap.setToPoint(locator.latitude, locator.longitude);
var newMarker = document.createElement('leaflet-marker');
var lat1 = locator.latitude;
var long1 = locator.longitude;
var lat = document.createAttribute("latitude");
lat.value = lat1;
var longi = document.createAttribute("longitude");
longi.value = long1;
newMarker.setAttributeNode(lat);
newMarker.setAttributeNode(longi);
newMarker.id="marker";
Polymer.dom(parent).appendChild(newMarker);
I also get these warning in Firefox, but I don’t think these are the source of this problem:
Use of document.createAttribute() is deprecated. Use element.setAttribute() instead.
Use of setAttributeNode() is deprecated. Use setAttribute() instead.
(I do not understand how to use element.setAttribute to create an element, but this is another question).
Solution
Answered By: Anonymous
You’re mixing things up. Using setAttribute is more than enough for what you’re trying to do. You need to call it on the element you’ve just created by using document.createElement.If you want this HTML:
<leaflet-marker id="marker" latitude="0" longitude="0"></leaflet-marker>
You’ll need to create one element and add three attributes to it:
var marker = document.createElement('leaflet-marker')
marker.setAttribute('id', 'marker')
marker.setAttribute('latitude', locator.latitude)
marker.setAttribute('longitude', locator.longitude)
Polymer.dom(parent).appendChild(marker)
