Support

Account

Home Forums Search Search Results for 'polygon'

Search Results for 'polygon'

topic

  • Unread

    Google Maps Polygon Field

    I’d love to have a Google Maps field that allow me to dray a polygon instead of a single point.

  • Solving

    Adding Polygons to a Google Map

    I’m trying to make it possible to add polygons to a map in the Google Map field, along with a marker. I found a pen with relatively simple code that shows how to create a polygon tool on a Google Map, but how to integrate it within the existing Google Map field, or an extension of it, is beyond my capabilities.

    Has anyone been able to accomplish something like this? Looking in this forum, I found one related topic, but it’s over 2 years old, and the suggestions in the replies are old, unmaintained plugins that won’t really work (they don’t seem to be using Google Maps).

    This may just be complex, but I’m hoping someone can point me to an existing solution, or at least some steps to get started. Thanks!

  • Unread

    Google Map – Polygon

    Hi All,

    I wondered if anyone had any luck on using the Google Map field but creating regions/polygon areas?

    If so, any help is much appreciated!

    Kindest Regards

reply

  • I’ve successfully filtered the block registration to include the SVG icon with custom foreground color. Note that I had to bump up the priority of the enqueue action to 9 in order for the filter to apply; maybe there is a better way of doing it. Also note that the SVG element is not a string; you’ll need to have a workflow set up like what wp-scripts provides.

    The code below is within a custom plugin.

    acf-filter.js

    
    const { addFilter } = wp.hooks;
    
    /**
     * ACF Custom SVG Icon filter
     *
     * ACF detects an SVG string for icon but not icon['src']
     */
    addFilter(
    	'blocks.registerBlockType',
    	'cr0ybot/acf-block-icons',
    	( settings, name ) => {
    		if ( name === 'acf/my-block' ) {
    			settings.icon = {
    				foreground: '#7bb12d',
    				src: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0,0H24V24H0Z" fill="none"/><polygon points="20 18 4 18 4 20 20 20 20 18"/><path d="M22,3H2A1,1,0,0,0,1,4V15a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V4A1,1,0,0,0,22,3ZM21,5V9.92l-3.38-2.7a1,1,0,0,0-1.24,0L12,10.74,8.6,8.2a1,1,0,0,0-1.15,0L3,11.13V5ZM3,14v-.46l5-3.32L11.4,12.8a1,1,0,0,0,1.22,0L17,9.28l4,3.2V14Z"/></svg>,
    			};
    		}
    
    		return settings;
    	}
    );
    

    plugin.php

    
    function cr0ybot_block_editor_enqueue_assets() {
    	wp_enqueue_script(
    		'cr0ybot-block-filter',
    		plugins_url( '/acf-filter.js', __FILE__ ),
    	);
    }
    add_action( 'enqueue_block_editor_assets', 'cr0ybot_block_editor_enqueue_assets', 9 );
    
    
  • Just a small update, the acf-block-icon plugin is not actually working for me.

    I did a little digging into the ACF code and it looks like a string starting with <svg is being detected, but only for the icon property and not if you’ve set the icon via icon['src']. I was setting my icon like this because I want to have a custom foreground color:

    
    acf_register_block_type( array(
        // ...
        'icon' => array(
            'foreground' => '#7bb12d',
            'src' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0,0H24V24H0Z" fill="none"/><polygon points="20 18 4 18 4 20 20 20 20 18"/><path d="M22,3H2A1,1,0,0,0,1,4V15a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V4A1,1,0,0,0,22,3ZM21,5V9.92l-3.38-2.7a1,1,0,0,0-1.24,0L12,10.74,8.6,8.2a1,1,0,0,0-1.15,0L3,11.13V5ZM3,14v-.46l5-3.32L11.4,12.8a1,1,0,0,0,1.22,0L17,9.28l4,3.2V14Z"/></svg>',
    ),
    

    I’m looking to see if I can add a filter via JS on blocks.registerBlockType to handle the icon with foreground color for the time being.

  • Hi,

    I’m also very interested by Polygon feature: I would like be able to add Polygons like we can add Markers: to enable my front user to send me this kind of datas.

    I already use WPGMAPSPro but even if it owns many more features (like polygons), it also hundred less flexible than ACF MAP: we can’t use it as field…

    Does someone found a solution?

  • Thanks for the comprehensive answer DarthTicius. I guess the main thing which was causing my trouble was some way to have a polygon drawing tool in the backend, for non-technical users to add their own polygon shapes along with their marker, within the location field interface. I probably should have been clearer on that, sorry for the confusion!

    I’ve moved on to using another solution for this project, though this may still be something that would be useful at some point. It looks like you’ve definitely provided all the pieces necessary to display the polygons on the front-end though, hopefully that will be useful for several people in the future.

  • @updownupdown Hi, once you add code for google maps for acf, you need to input the coordinates of polygon:

    // center map
    	center_map( map );
    
    	// Define the LatLng coordinates for the polygon.
    	var triangleCoords = [
    		{lat: 44.28223, lng: 20.63992},
    		{lat: 44.28253, lng: 20.63935},
    		{lat: 44.28301, lng: 20.63984},
    		{lat: 44.28226, lng: 20.64103},
    		{lat: 44.28246, lng: 20.64138},
    		{lat: 44.28192, lng: 20.64267},
    		{lat: 44.2812, lng: 20.64186},
    		{lat: 44.28206, lng: 20.63973}
    	];
    
    	  // Construct the polygon.
    	  var bermudaTriangle = new google.maps.Polygon({
    	  	paths: triangleCoords,
    	  	strokeColor: '#FF0000',
    	  	strokeOpacity: 0.8,
    	  	strokeWeight: 3,
    	  	fillColor: '#FF0000',
    	  	fillOpacity: 0.35
    	  });
    	  bermudaTriangle.setMap(map);
    
    	  // Add a listener for the click event.
    	  bermudaTriangle.addListener('click', showArrays);
    
    	  infoWindow = new google.maps.InfoWindow;
    // }
    

    after that you can render the polygon with this piece of code:

    /** @this {google.maps.Polygon} */
    function showArrays(event) {
      // Since this polygon has only one path, we can call getPath() to return the
      // MVCArray of LatLngs.
      var vertices = this.getPath();
    
      var contentString = '<b>Bermuda Triangle polygon</b><br>' +
          'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
          '<br>';
    
      // Iterate over the vertices.
      for (var i =0; i < vertices.getLength(); i++) {
        var xy = vertices.getAt(i);
        contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
            xy.lng();
      }
    
      // // Replace the info window's content and position.
      // Turned off since i didn't need the rendering of tooltip over polygon.
      // infoWindow.setContent(contentString);
      // infoWindow.setPosition(event.latLng);
    
      // infoWindow.open(map);
    }
    	

    And that is it 🙂

    Here is the code i use for google maps on one of the wp website where i needed polygon area:

    <style type="text/css">
    
    .acf-map {
    	width: 100%;
    	height: 400px;
    	border: #ccc solid 1px;
    	/* margin: 20px 0; */
    }
    
    /* fixes potential theme css conflict */
    .acf-map img {
       max-width: inherit !important;
    }
    
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=ADD-YOUR-KEY-HERE"></script>
    <script type="text/javascript">
    (function($) {
    
    /*
    *  new_map
    *
    *  This function will render a Google Map onto the selected jQuery element
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	4.3.0
    *
    *  @param	$el (jQuery element)
    *  @return	n/a
    */
    
    function new_map( $el ) {
    	
    	// var
    	var $markers = $el.find('.marker');
    	
    	
    	// vars
           //custom styling of the map
    	var args = {
    		zoom		: 16,
    		center		: new google.maps.LatLng(0, 0),
    		
    		styles: [
    				{
    					"featureType": "all",
    					"elementType": "geometry",
    					"stylers": [
    						{
    							"color": "#574029"
    						}
    					]
    				},
    				{
    					"featureType": "all",
    					"elementType": "labels.text.fill",
    					"stylers": [
    						{
    							"gamma": "1.27"
    						},
    						{
    							"lightness": 20
    						},
    						{
    							"color": "#ffffff"
    						}
    					]
    				},
    				{
    					"featureType": "all",
    					"elementType": "labels.text.stroke",
    					"stylers": [
    						{
    							"saturation": "-100"
    						},
    						{
    							"lightness": "-100"
    						},
    						{
    							"weight": "1.19"
    						},
    						{
    							"gamma": "0.00"
    						},
    						{
    							"hue": "#ff0000"
    						},
    						{
    							"invert_lightness": true
    						}
    					]
    				},
    				{
    					"featureType": "all",
    					"elementType": "labels.icon",
    					"stylers": [
    						{
    							"visibility": "off"
    						},
    						{
    							"saturation": "-100"
    						},
    						{
    							"lightness": "-100"
    						},
    						{
    							"gamma": "0.00"
    						},
    						{
    							"weight": "0.01"
    						}
    					]
    				},
    				{
    					"featureType": "landscape",
    					"elementType": "geometry",
    					"stylers": [
    						{
    							"lightness": 30
    						},
    						{
    							"saturation": 30
    						},
    						{
    							"color": "#919d8b"
    						}
    					]
    				},
    				{
    					"featureType": "poi",
    					"elementType": "geometry",
    					"stylers": [
    						{
    							"saturation": 20
    						}
    					]
    				},
    				{
    					"featureType": "poi.park",
    					"elementType": "geometry",
    					"stylers": [
    						{
    							"lightness": 20
    						},
    						{
    							"saturation": -20
    						}
    					]
    				},
    				{
    					"featureType": "road",
    					"elementType": "geometry",
    					"stylers": [
    						{
    							"lightness": "40"
    						},
    						{
    							"saturation": -30
    						}
    					]
    				},
    				{
    					"featureType": "road",
    					"elementType": "geometry.stroke",
    					"stylers": [
    						{
    							"saturation": 25
    						},
    						{
    							"lightness": "100"
    						},
    						{
    							"gamma": "1.00"
    						},
    						{
    							"weight": "0.78"
    						}
    					]
    				},
    				{
    					"featureType": "water",
    					"elementType": "all",
    					"stylers": [
    						{
    							"lightness": -20
    						}
    					]
    				}
    			],
    		mapTypeId	: google.maps.MapTypeId.ROADMAP
    	};
    	
    	
    	// create map	        	
    	var map = new google.maps.Map( $el[0], args);
    	
    	
    	// add a markers reference
    	map.markers = [];
    	
    	
    	// add markers
    	$markers.each(function(){
    		
    		add_marker( $(this), map );
    		
    	});
    	
    	
    	// center map
    	center_map( map );
    
    	// Define the LatLng coordinates for the polygon.
    	var triangleCoords = [
    		{lat: 44.28223, lng: 20.63992},
    		{lat: 44.28253, lng: 20.63935},
    		{lat: 44.28301, lng: 20.63984},
    		{lat: 44.28226, lng: 20.64103},
    		{lat: 44.28246, lng: 20.64138},
    		{lat: 44.28192, lng: 20.64267},
    		{lat: 44.2812, lng: 20.64186},
    		{lat: 44.28206, lng: 20.63973}
    	];
    
    	  // Construct the polygon.
    	  var bermudaTriangle = new google.maps.Polygon({
    	  	paths: triangleCoords,
    	  	strokeColor: '#FF0000',
    	  	strokeOpacity: 0.8,
    	  	strokeWeight: 3,
    	  	fillColor: '#FF0000',
    	  	fillOpacity: 0.35
    	  });
    	  bermudaTriangle.setMap(map);
    
    	  // Add a listener for the click event.
    	  bermudaTriangle.addListener('click', showArrays);
    
    	  infoWindow = new google.maps.InfoWindow;
    // }
    
    	
    	// return
    	return map;
    	
    }
    
    /*
    *  add_marker
    *
    *  This function will add a marker to the selected Google Map
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	4.3.0
    *
    *  @param	$marker (jQuery element)
    *  @param	map (Google Map object)
    *  @return	n/a
    */
    
    function add_marker( $marker, map ) {
    
    	// var
    	var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    
    	// create marker
    	icon = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
    	var marker = new google.maps.Marker({
    		position	: latlng,
    		icon        : icon,
    		map			: map
    	});
    
    	// add to array
    	map.markers.push( marker );
    
    	// if marker contains HTML, add it to an infoWindow
    	if( $marker.html() )
    	{
    		// create info window
    		var infowindow = new google.maps.InfoWindow({
    			content		: $marker.html()
    		});
    
    		// show info window when marker is clicked
    		google.maps.event.addListener(marker, 'click', function() {
    
    			infowindow.open( map, marker );
    
    		});
    	}
    
    }
    
    /*
    *  center_map
    *
    *  This function will center the map, showing all markers attached to this map
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	4.3.0
    *
    *  @param	map (Google Map object)
    *  @return	n/a
    */
    
    function center_map( map ) {
    
    	// vars
    	var bounds = new google.maps.LatLngBounds();
    
    	// loop through all markers and create bounds
    	$.each( map.markers, function( i, marker ){
    
    		var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
    
    		bounds.extend( latlng );
    
    	});
    
    	// only 1 marker?
    	if( map.markers.length == 1 )
    	{
    		// set center of map
    		map.setCenter( bounds.getCenter() );
    		map.setZoom( 16 );
    	}
    	else
    	{
    		// fit to bounds
    		map.fitBounds( bounds );
    	}
    
    }
    
    /** @this {google.maps.Polygon} */
    
    function showArrays(event) {
      // Since this polygon has only one path, we can call getPath() to return the
      // MVCArray of LatLngs.
      var vertices = this.getPath();
    
      var contentString = '<b>Bermuda Triangle polygon</b><br>' +
          'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
          '<br>';
    
      // Iterate over the vertices.
      for (var i =0; i < vertices.getLength(); i++) {
        var xy = vertices.getAt(i);
        contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
            xy.lng();
      }
    
      // // Replace the info window's content and position.
      // Turned off since i didn't need the rendering of tooltip over polygon.
      // infoWindow.setContent(contentString);
      // infoWindow.setPosition(event.latLng);
    
      // infoWindow.open(map);
    }
    
    /*
    *  document ready
    *
    *  This function will render each map when the document is ready (page has loaded)
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	5.0.0
    *
    *  @param	n/a
    *  @return	n/a
    */
    // global var
    var map = null;
    
    $(document).ready(function(){
    
    	$('.acf-map').each(function(){
    
    		// create map
    		map = new_map( $(this) );
    
    	});
    
    });
    
    })(jQuery);
    </script>

    and i used this polygon render by google as starting point, and of course the pen u mentioned earlier to get the coordinates of the polygon i needed.

Viewing 8 results - 1 through 8 (of 8 total)