Marker Icon (customcatalog_openstreetmap_markers.html5)

[iGweb]

Hello,

I would like to customize the markers on an "openstreetmap" card in my custom catalog (see attachment)

Is it possible ?

Thank you

[Tim]

Open the customcatalog_openstreetmap_markers Template and navigate to line 144 and 159. That's where the marker is being created.

var marker = L.marker([lat, lon]);
marker.Icon('http://maps.gstatic.com/intl/de_de/mapfiles/ms/micons/red-pushpin.png');

http://dev.openlayers.org/docs/files...rs.Marker.icon
https://wiki.openstreetmap.org/wiki/Marker_API

[iGweb]

Thank you for your message.

I want to be able to put a different icon marker for each location on the map. It must therefore be managed via my customcatalogue.

Here is what I have done so far:

1- I created an image attribute in my catalog for my icon

2- I modified the "customcatalog_openstreetmap_markers.html5" template from line 30 to 47 to add my "icon" field previously created in my catalog.

 $tmp = array  (  'coords'  => $entry->field('geolocation')->value(),  'latitude' => $coords[0],  'longitude' => $coords[1],  'city' => $entry->field('geolocation')->option('city'),  'street' => $entry->field('geolocation')->option('street'),  'country' => $entry->field('geolocation')->option('country'),  'zipcode' => $entry->field('geolocation')->option('zipcode'),  'link' => $entry->links('detail')->url,  'infotext' => $strInfo,  'icon' => '',  );     if($objFile = \FilesModel::findByUuid($entry->field('icon')->value()))  $tmp['icon'] = $objFile->path;            $arrLocations[] = $tmp; 

3- Now I'm blocking the manipulation to be done at line 144 ... :/

 {  var lat = location.latitude;  var lon = location.longitude;  var marker = L.marker([lat, lon]);     marker.bindPopup( location.infotext ).openPopup();  marker.addTo(map);     centers_lat.push(lat);  centers_lng.push(lon);  } 

Thank you

[Tim]

Correct. Pass the icon information to the json.

In the JS section each "location" information is stored in the "location" variable running through the for loop.
Giving you: location.icon, is your path.

marker.Icon(location.icon);

[iGweb]

Ok thank you, I will test this.

I would also like to do an ajax load of the map when we click on a checkbox filter (on the left).
Without completely reloading the page.

Is this a possible feature?

Thank you

[Tim]

Surely it's possible but far more than I can provide as basic support here.

I have an Ajax example for an infinite scrolling list here: https://forum.premium-contao-themes....oll-ajax-liste

Maybe it's a starting point.

[iGweb]

Ok Thank you