I have recently started looking at Umbraco and adding maps with a editor allowing people to control it via the Content section and found the uMap editor. However, I'm having some trouble configuring this to display and wondered if anyone had an example or link to some documentation about it.
uMap is a clean, simple mapping property editor for Umbraco 7.1+.
Property editor has two config values - the lat,lng values for the default location and a comma-separated list of additional data-points to store against each location (ie, you might want to record an email address or telephone number, if you're building a set of store locations). Both config values are optional.
For content editors, the property editor presents a familiar Google Map, on which they can drop new makers or reposition existing. Locations (and any additional fields for each) are tabulated below the map, with pagination and disable/delete options for each.
uMap uses the Google Maps API and the Places API to source data. At the Umbraco end, it's stored as a simple JSON object to make front-end display straightforward (especially if you use /Base to return said JSON via an AJAX request).
NB you will need to create a new datatype in the developer section and set the property editor to uMap. Then you can create a property on your document type that uses this datatype.
Thanks for this, I've managed to get this setup and via the content section select my pointers however I'm just having some trouble linking this up with Google Maps API as I've not used that before as well.
Yes, it would be helpful if the package developer provided an example front end implementation.
My only advice would be to inspect the backoffice page that displays the map, and port over the Google Maps JS references and potentially the JS script that displays the points on the page to your front end template.
You can display the raw value of your property using
@CurrentPage.GetPropertyValue("yourAlias")
in your template, and it will hopefully output a JSON object of your points. Then it would be a case of reading the Google Maps API docs and working out how to pass this into a JS function to display them as points on your map.
Good luck! Once you're done, please post your solution here to help others in the same situation.
uMap examples
Hi,
I have recently started looking at Umbraco and adding maps with a editor allowing people to control it via the Content section and found the uMap editor. However, I'm having some trouble configuring this to display and wondered if anyone had an example or link to some documentation about it.
Thanks
Hi Jeff, this is from the project readme:
uMap
Simple Google Maps integration for Umbraco
uMap is a clean, simple mapping property editor for Umbraco 7.1+.
Property editor has two config values - the lat,lng values for the default location and a comma-separated list of additional data-points to store against each location (ie, you might want to record an email address or telephone number, if you're building a set of store locations). Both config values are optional.
For content editors, the property editor presents a familiar Google Map, on which they can drop new makers or reposition existing. Locations (and any additional fields for each) are tabulated below the map, with pagination and disable/delete options for each.
uMap uses the Google Maps API and the Places API to source data. At the Umbraco end, it's stored as a simple JSON object to make front-end display straightforward (especially if you use /Base to return said JSON via an AJAX request).
NB you will need to create a new datatype in the developer section and set the property editor to uMap. Then you can create a property on your document type that uses this datatype.
This image shows the datatype setup: https://our.umbraco.org/media/wiki/133353/635499700199129552_Untitled-2png.png
Thanks for this, I've managed to get this setup and via the content section select my pointers however I'm just having some trouble linking this up with Google Maps API as I've not used that before as well.
Yes, it would be helpful if the package developer provided an example front end implementation.
My only advice would be to inspect the backoffice page that displays the map, and port over the Google Maps JS references and potentially the JS script that displays the points on the page to your front end template.
You can display the raw value of your property using
@CurrentPage.GetPropertyValue("yourAlias")in your template, and it will hopefully output a JSON object of your points. Then it would be a case of reading the Google Maps API docs and working out how to pass this into a JS function to display them as points on your map.
Good luck! Once you're done, please post your solution here to help others in the same situation.
After much more search and reading I found this video: https://www.youtube.com/watch?v=mfjqLmD6Li8
After tweaking the code with the for loop I've got it working. Thanks for you help with this!
is working on a reply...