Integrating multiple MakiMarkers with Leaflet documentation.

[dvodvo]

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 &copy; <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 ?

[jseppi]

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"});

[dvodvo]

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();

[jseppi]

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>

[dvodvo]

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?