Maps with Openlayers

Showing the maps using openlayers

The concept

Create and render the map using OpenLayers plugin with nearly zero configuration and painless coding. You can also add the markers with individual data. Suitable for building Geographic Information System (GIS) application.

Basic example

This example below is a basic map including the geolocation service. The marker will follow to your location if you enable the location tracker service in your browser.

The above result is used the following code

<div id="maps" role="map" data-draggable="1" data-geocoder="1" data-geolocation="1" data-json-file="//path.to/file.json"></div>

Data Variable Description
draggable Enable the marker dragging, this parameter is used to get the coordinate of the dragged marker
geocoder Enable the place search
geolocation Enable the geolocation to track the device location
json-file Load the marker from json file

Below is a sample of json file structure 

[
	{
		"coordinate":
		{
			"lat":-6.2299611,
			"lng":107.0682127
		},
		"title":"Marker with popup",
		"description":"Sample of marker with popup (infowindow)",
		"icon":"https://www.dwitrimedia.com/vendor/openlayers/resources/icons/marker.png"
	},
	{
		"coordinate":
		{
			"lat":-6.2299611,
			"lng":107.0683127
		},
		"title":"Marker with popup 2",
		"description":"Sample of marker with popup (infowindow)",
		"icon":"https://www.dwitrimedia.com/vendor/openlayers/resources/icons/marker.png"
	},
	{
		"coordinate":
		{
			"lat":-6.2299611,
			"lng":107.0684127
		},
		"title":"Marker with popup 3",
		"description":"Sample of marker with popup (infowindow)",
		"icon":"https://www.dwitrimedia.com/vendor/openlayers/resources/icons/marker.png"
	}
]