[Resolved] Combine SVG elements to build the marker icon

[Author]

Posts

[romanB-3]

Hello,
I have a view displaying events with 2 taxonomies : "type of event" and "main actor".
Thanks to this page, https://toolset.com/forums/topic/different-marker-icons-based-on-taxonomy/, I am able to setup a different pin icon for each "type of event".
Now, I would like to colorize the pin background color based on the "main actor" term.

For instance : "murder" is a gun icon, and "robbery" is a thief bag icon.
Then, "murder" committed by "terrorist" should be a gun icon on black background.
But "murder" committed by "civilian" should be a gun icon on blue background.

Since I have about 20 "types of event" and 20 "main actors", it would mean building 400 icons... and as much icon download, and code.

Therefore, I was thinking of building the icons thanks to SVG code. Would that be possible with JS ?

Or would it be another way I didn't think of ?

Thank you.

[Christian Cox]

Maybe, but I haven't seen it done before. I guess in theory you could upload a blank png image for the marker icons. A quick search led me to this post:
https://stackoverflow.com/questions/24413766/how-to-use-svg-markers-in-google-maps-api-v3

And the documentation here for changing a View's map settings:
https://toolset.com/documentation/user-guides/programmatically-change-map-settings/
You can access the individual markers like this:

var mrkr = WPViews.view_addon_maps.markers['map-id']['marker-id'];

If you'd like to see more robust SVG support for these icons (I think it's a great idea) I encourage you to submit a request here: https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

[romanB-3]

Hello and thank you,

Your suggestion is most appreciated ; thank you.

I've tried a first test for a specific marker, but without success.
Here is the code I tried :

$( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
  var mrkr = WPViews.view_addon_markers['carte-des-incidents']['marker-6703']({
    position: event.latLng,
    map: map,
    draggable: false,
    icon: '<em><u>hidden link</u></em>'
  });
});

Next, I created a custom field for the taxonomy, which is an "image field" filled with the svg icon file.
But I can't figure how to get the image URL, since the custom field doesn't appear in the backend view fields :
I was thinking on something like :

[types field='wpcf-icone' item=''term-id"][/types]

Last, I'm not quite sure how to apply this new marker to all markers for a specific category.
Would you suggest to build a JS function into the loop with a <script> tag ?

Thank you.

[Christian Cox]

This code doesn't do anything.

 var mrkr = WPViews.view_addon_markers['carte-des-incidents']['marker-6703']({
    position: event.latLng,
    map: map,
    draggable: false,
    icon: '<em><u>hidden link</u></em>'
  });

1. If you want to modify the icon, call setIcon on the marker.
2. You cannot use an HTTP svg file in an HTTPS site. It must be an HTTPS svg file.
3. The svg file is 404 on both servers anyway, so this won't work: hidden link
hidden link

[romanB-3]

Thank you.
I understand there was several problems.
Here is a new try.

1- I created a new custom field for the custom taxonomy, which is an image field called "icone".

2- I added custom icons for about half of the terms ;

3- I created a new view getting the first term's icon url :

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
		<wpv-loop>
          [types termmeta='icone' output='raw' resize='proportional'][/types]
		</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

4- I placed that view into the main view loop, and double-checked it's ok and it returns a valid URL for the icon ;

5- I moved my script from the JS to the main loop in order to be able to use types shortcodes within the code - as suggested by one of your colleagues in another post ;

6- I changed the "icon" setting to a "seticon" setting, so this is the final script I got :

<script type="text/javascript">
        var mrkr = WPViews.view_addon_markers['carte-des-incidents']['marker-[wpv-post-id]']({
        position: event.latLng,
        map: map,
        draggable: false,
        seticon: '[wpv-view name="url-icone-type-incident"]'
        });
      </script>

But it still don't work... ?

[Christian Cox]

You need to get the marker object, then call the setIcon function on that marker object.

 var mrkr = WPViews.view_addon_markers['carte-des-incidents']['marker-[wpv-post-id]'];
mrkr.setIcon(...)...

Refer to the documentation here: https://developers.google.com/maps/documentation/javascript/reference/marker

[romanB-3]

Hello and thank you,

Here is the new code

      <script type="text/javascript">
        var mrkr = WPViews.view_addon_markers['carte-des-incidents']['marker-[wpv-post-id]'];
        mrkr.setIcon('[wpv-view name="url-icone-type-incident"]');
      </script>

Here is the error code in the console :

SyntaxError: '' string literal contains an unescaped line break

And here is the code as it appears in the frontend :

<script type="text/javascript">
        var mrkr = WPViews.view_addon_markers['carte-des-incidents']['marker-6735'];
        mrkr.setIcon('


<em><u>hidden link</u></em>

');
      </script>

Thank you.

[Christian Cox]

It looks like you need to delete some extra spaces to make this work.
- Edit the View and check "Disable the wrapping DIV around the View"
- Delete all extra spaces in the View's Loop Output Editor
- Delete all line breaks in the View's Loop Output Editor so all the code appears in one long line

[romanB-3]

Hello and thank you,
I have done all this already without success.
Thank you.

[Christian Cox]

Can I log in and take a closer look? Private reply fields are active here.

[Christian Cox]

There was an extra space at the end of the loop, it is easy to overlook.
1. We do not recommend placing script tags inside a loop. Scripts should go in the JS tab or in a separate file.
2. Your code produces errors because it is executed before WPViews is defined. You probably need an event handler here. Our documentation provides one example of an event handler that is fired when the map is ready:
https://toolset.com/documentation/user-guides/programmatically-change-map-settings/

[romanB-3]

1- Since I must use shortcode in this JS script, I understand I have no choice but to insert it into the loop. If there is another way it would be great, but for now I'm stuck here. Luo recommended to do so a few days ago : https://toolset.com/forums/topic/use-views-and-fields-shortcodes-within-css-and-or-js-editors/

2- I have just added the event trigger, like this

      <script type="text/javascript">
        $( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
        var mrkr = WPViews.view_addon_markers['carte-des-incidents']['marker-[wpv-post-id]'];
        mrkr.setIcon('[wpv-view name="url-icone-type-incident"]');
        } );
      </script>

But it still doesn't work...
Worst, it now breaks the clusters.
Error changed and is now :

TypeError: WPViews.view_addon_markers is undefined

Thank you.

[Christian Cox]

I think there was a copy + paste error somewhere, probably my fault. The object is WPViews.view_addon_maps.

var mrkr = WPViews.view_addon_maps.markers['carte-des-incidents']['marker-[wpv-post-id]'];

[romanB-3]

My issue is resolved now. Thank you very much!

[smileBeda]

This code can most certainly not work because things like the below will always fail in JS:

  var mrkr = WPViews.view_addon_markers['carte-des-incidents']['marker-[wpv-post-id]'];

This will make a mathematical operation instead of actually setting a object property (I refer to the ['marker-[wpv-post-id]'], this will try to subtract the value of wpv-post-id from the string marker).

So I fiddled around with this and fixed it but still run into the issue which is as well pretty much logical to happen:
Markers are created dynamically, asynchronously. This makes it literally impossible to access the WPViews.view_addon_markers.map_name.marker_id (where map_name and marker_id are the actual values you would be sueding in the setup, so replace on usage).
Impossible to access because while a console.log will show the marker data, this only happens once you click the ">" in the console log to expand that object. But on code execution, that object is not yet populated. This is the reason when you try to access it will throw an error and say it is undefined, because at the point of js_event_wpv_addon_maps_init_map_completed, only the map instance is created, not all markers, since those might be paginated, etc.

So I am pretty much stuck with "not possible and certainly not working". However it would be very nice if we could use dynamic SVG exactly as @romanb-3 attempted here years ago (I believe I partially helped meanwhile recreate the exact project where this was/is used :P, however with WP Grid Builder instead of Toolset)

@christian-c, if you can still see/read this, do you have any further insight how we can make this work? Because as per above points I elaborate I doubt this ever worked, specially with the 'marker-[wpv-post-id]' which will try to make a operation instead of a string (this can be solved easily) but also buy the issue mentioned that markers are not available at this point, and hence also cannot be dynamically altered.
We would need a hook to use asynchronously when the marker is generated, which might be before or after paginate and search or even zoom in/out.

Would love to bring this to work with Toolset, right now however it seems a thing of impossible result

I currently achieve similar, but not the same results using a custom field to store the type of marker and then load that as an URL in the Map Marker Icon Settings, however this is much more limited than actually being able to create the SVG directly inside the View Loop, since it requires you to store the SVG somewhere and after that it cannot be edited anymore on the fly, so you end up needing many SVGs... and conditions or field values to listen to.

Even better would be if the Map Marker Icon setting would accept SVG instead of URL only. But that probably needs a ground up change in the Core Code of Maps...

Thanks if you have any input to share further!