Routeplanner property editor for Umbraco backoffice
The property editor will enable you to draw a route in the Umbraco backoffice, and later on get it rendered on one of your pages.
The editor tries to be as flexible as possible, to enable as many possibilities as possible.
Loading the google map has been inspired from the many Google Maps modules for the Umbraco Backoffice, and the functionality was inspired by a running site i used to utilize.
The editor was developed as a routeplanner for running. This means that you could go draw you route, and get the length of it. Later on you could input the duration of the run, and render it on your website. Its great for looking back at how you preformed earlier.
above is a screenshot from an Umbraco 7.2.1 installation where the routeplanner is used to draw a route
A recording of the video can be viewed in this youtube https://www.youtube.com/watch?v=MrTa5p-GNkI
Prevalues enabled in the fieldtype is:
Rendering the map
The package contains of the property editor parts, but also a render part. The MVC HtmlHelper has been extended, and the following two methods are avalible:
The second helper method is
A Simple partialview that renderes the map could look like this:
Layout = "Running.cshtml";
@Html.GetRouteJs(Umbraco.AssignedContentItem, "route",strokeColor:"#ff0000", strokeWeight:10, strokeOpacity:"0.5")
above is a screenshot from the frontend, a very simple one of its kind
For all the frontend work, you shuold remember to reference the RoutePlanner.dll in your code, or it wont work.
The editor is testet in Umbraco 7.2.1, but ***SHOULD*** work in all that supports the new Angular UI(Belle, 7.0+))