Geolocation

The Geolocation field is used to set geolocation coordinates on an item – either automatically by using values from other item fields or by manually selecting or entering a set of coordinates.

If you want to retrieve coordinates automatically based on values from other fields you:

  1. Create a set of address fields on the item type – e.g. Street, Zip, City, etc.
  2. Add a geolocation field to the item type
  3. In the geolocation field settings, add a comma-separated list of the system names of the fields you want to use to look up the geolocation coordinates (Figure 1.1)
  4. Save

Then, when an item based on the item type is created, the geolocation field will be filled with coordinates retrieved based on the included address fields (Figure 1.2).

The user can override the retrieved coordinates by checking Override retrieved coordinates and entering coordinates manually, or by using the map marker icon to open a map and selecting a location manually.

When rendering content from this item in frontend, you can then access the geolocation using the GetGeolocation-method and render e.g. a map with a marker:

RAZOR
@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> @MasterPageFile("Master/Main.cshtml") <div class="container"> <div class="row"> <div class="col-md-12 row"> <div class="col-md-12"> <h1>@Model.Title</h1> <p>This is an item type rendering a map based on a geolocation retrieved automatically via the values in the other item fields.</p> </div> <div class="col-md-6"> <div><b>Name:</b> @Model.Item.GetField("Name").Value</div> <div><b>Street:</b> @Model.Item.GetField("Geolocation_Street").Value</div> <div><b>ZIP:</b> @Model.Item.GetField("Geolocation_Zipcode").Value</div> <div><b>City:</b> @Model.Item.GetField("Geolocation_city").Value</div> <div><b>Country:</b> @Model.Item.GetField("Geolocation_Country").Value</div> <div><b>Latitude:</b> @Model.Item.GetGeolocation("Geolocation").Latitude</div> <div><b>Longitude:</b> @Model.Item.GetGeolocation("Geolocation").Longitude</div> </div> <div class="col-md-6"> <div id="GoogleMap" style="width:100%;height:400px;"></div> </div> </div> <script> function myMap() { var location = new google.maps.LatLng(@Model.Item.GetGeolocation("Geolocation").Latitude, @Model.Item.GetGeolocation("Geolocation").Longitude); var mapProp = { center: location, zoom: 15, }; var map = new google.maps.Map(document.getElementById("GoogleMap"), mapProp); new google.maps.Marker({ position: location, map: map }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOURKEYHERE&callback=myMap"></script> </div> </div>

The example above could show up as this: