[Resolved] I need to add area on a Toolset map

[Author]

Posts

[cedricd-2]

Tell us what you are trying to do?
I have a dynamic map with markers but I want to add areas in the background (could be static)

Is there a similar example that we can see?
hidden link

Thanks

[Mateus Getulio Supporter Languages: English (English ) Timezone: America/Sao_Paulo (GMT-03:00)]

Hello,

Thank you for reaching out and sharing the example of the map you're working on. I understand you'd like to add static background areas on a dynamic map, highlighting certain parts of a city.

Although the current Views and Maps integration doesn't offer a built-in way to add such background areas, you can accomplish this through custom JavaScript. Here's a code sample that will allow you to connect each marker and include polygon shapes that serve as your background areas:

jQuery(document).ready(function($){
  function initMap() {
    var mapid = 'map-2';  // Replace with your actual map ID
    var map = WPViews.view_addon_maps.get_map(mapid);
    var markers = WPViews.view_addon_maps.markers[mapid];

    // Check if there are markers
    if(markers.length === 0) return;

    // Add your existing markers based on Toolset settings
    // ... (Your existing code for adding markers should go here)

    // Define the LatLng coordinates for a static polygon.
    var cityCoords = [
      {lat: 37.418, lng: -122.084},
      {lat: 37.418, lng: -122.086},
      {lat: 37.416, lng: -122.086},
      {lat: 37.416, lng: -122.084}
    ];

    // Construct the polygon.
    var cityArea = new google.maps.Polygon({
      paths: cityCoords,
      strokeColor: '#0000FF',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#0000FF',
      fillOpacity: 0.35
    });
    cityArea.setMap(map);
  }

  $(document).on('js_event_wpv_addon_maps_init_map_completed', function(event, event_settings) {
    initMap();
  });
});

This will create a polygonal area in your map with red outlines and a semi-transparent red fill. You can change the coordinates in the cityCoords array to define the area you wish to highlight. Modify the attributes of the cityArea to style the polygon as you'd like.

You can find more details on drawing shapes on Google Maps here: hidden link

Please have in mind that giving support to custom code is out of the scope of this forum. The hints I shared could point you in the right direction, but we can't create, debug or modify custom code for you and it's your responsibility to maintain it.

If implementation becomes a roadblock, you might want to explore the list of Toolset Contractors for assistance: https://toolset.com/contractors/

Kind regards,
Mateus

[cedricd-2]

Oh, thanks.

I'm on a VIEW with the markers added by Toolset, so I deleted that part, and added a name to the area.
I have put this code in the JS box of the map.

jQuery(document).ready(function($){

function initMap() {
var mapid = 'carte';
var map = WPViews.view_addon_maps.get_map(mapid);
var cityCoords = [
{lng: 2.3360251, lat:48.9122591},
{lng: 2.3364328, lat:48.9119277},
{lng: 2.3367118, lat:48.9114623},
{lng: 2.3357033, lat:48.9107078},
{lng: 2.3369907, lat:48.9099463},
{lng: 2.3376023, lat:48.9104892},
{lng: 2.3380207, lat:48.910052},
{lng: 2.3386752, lat:48.9105245},
{lng: 2.3395227, lat:48.9113072},
{lng: 2.340263, lat:48.9119982},
{lng: 2.3400377, lat:48.912104},
{lng: 2.3401665, lat:48.9124636},
{lng: 2.3405205, lat:48.9128937},
{lng: 2.3401557, lat:48.9128866},
{lng: 2.3386215, lat:48.9127245},
{lng: 2.337849, lat:48.9125976},
{lng: 2.3360251, lat:48.9122591}
];

var cityArea = new google.maps.Polygon({
paths: cityCoords,
strokeColor: '#0000FF',
strokeOpacity: 1,
strokeWeight: 0,
fillColor: 'orange',
fillOpacity: .5,
title: 'Cordon'
});

attachPolygonInfoWindow(cityArea)

function attachPolygonInfoWindow(polygon) {
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(polygon, 'click', function (e) {
infoWindow.setContent("Quartier Cordon QP093044");
var latLng = e.latLng;
infoWindow.setPosition(latLng);
infoWindow.open(map);
});
}

cityArea.setMap(map);

}

$(document).on('js_event_wpv_addon_maps_init_map_completed', function(event, event_settings) {
initMap();
});

});

It is just brilliant. Thanks for your answer maybe off the scope, it's really what I wanted.

Toolset rules.