Integrating multiple MakiMarkers with Leaflet documentation.
dvodvo opened this issue · 4 comments
Leaflet intimates to initialize the tool as follows:
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'mNqd2J4cz_some_token_2qWArI'
and up to here multiple markers render.
If I add, according to the docs here:
L.MakiMarkers.accessToken ='mNqd2J4cz_some_token_2qWArI';
the markers disappear.
The following block, in ruby implementation, renders multiple markers according to Leaflet documentation
<% @a_points.each do |coordinate| %>
var marker_<%= coordinate.id.to_s %> = L.marker([<%= coordinate.latitude.to_s %>, <%= coordinate.longitude.to_s %>]).addTo(mymap);
marker_<%= coordinate.id.to_s %>.bindPopup("<b><%= coordinate.title %></b><br><%= coordinate.main_text %>").openPopup();
<% end %>
but attempting the following, in respect of MakiMarkers documentation fails with the same objects
var icon_<%= coordinate.id.to_s %> = L.MakiMarkers.icon({icon: <%= coordinate.maki.name %>, color: <%= coordinate.colourscheme.colour_1 %>, size: "m"});
var marker_<%= coordinate.id.to_s %> = L.marker([<%= coordinate.latitude.to_s %>, <%= coordinate.longitude.to_s %>], {icon: icon}).addTo(mymap);
marker_<%= coordinate.id.to_s %>.bindPopup("<b><%= coordinate.title %></b><br><%= coordinate.main_text %>").openPopup();
simply crashes the javascript leading to a blank screen with the following two errors:
SyntaxError: fields are not currently supported for the following line:
var icon_207 = L.MakiMarkers.icon({icon: Aquarium, color: #bad533, size: "m"});
How should this syntax be ?
You have a syntax error in your generated javascript. Aquarium
needs to be a string (that's why you have a SyntaxError
), and I think you'll need to lowercase it as well:
L.MakiMarkers.icon({icon: "aquarium", color: #bad533, size: "m"});
Corrected. However what to do with the declaration of the access token for l.MakiMarkers ?
note after the corrections the map renders but not the markers; TypeError: L.MakiMarkers is undefined
; the javascript is loaded in head section while the markers js is inline.
I do not think this is due to the token generation ( I added it in, with no change in behaviour), the script placing or syntax (in this case redered as):
var icon_207 = L.MakiMarkers.icon({icon: "aquarium", color: "#bad533", size: "m"});
var marker_207 = L.marker([16.2490067, -61.5650444], {icon: icon_207}).addTo(mymap);
marker_207.bindPopup("Parc Naturel
Snorkeling, plongées").openPopup();
That likely means you haven't actually included the MakiMarkers script in your page.
Include Leaflet.MakiMarkers.js in your page after you include Leaflet.js:
<script src="Leaflet.MakiMarkers.js"></script>
Ah! 'in the page'. I had it in the head, following the Leaflet.js - that eludes me often!
Ancillary query: could this script be used independantly of Leaflet (over other maps), as long as the coordinate system is consistent?