Breadcrumbs

Geek OpenStreetMap

Geek OpenStreetMap Module allows you to easily integrate OpenStreetMap into your website and articles. It comes with a simple-to-use back-end control panel and various advanced settings to help you be able to easily customize a map to fit your requirements.

Basic Settings

Setting Default Description
Map Width 100% Width of Map (in pixel, append % symbol after for width by percent)
Map Height 400 Height of Map (in pixel)
Map Tiles Url Specify the URL of tile server where the map will get tiles from. This enables you to change the display of map.
Leave blank to use default display of OpenStreetMap.
Maker Icon Type Icon Maker Icon Type
Marker Circle Color #ff6666 Select a color of marker icon.
Marker Circle Size 16 Select a size of marker icon.
Map Centre   Select a position where the map will be set center at.

Manage Markers

Setting Default Description
Data Source List Select a source where module will get data from.
- List: display markers from the defined list below.
- File: load markers from GeoJSON data file.
- Articles: load articles that added geo location data. You can narrow articles list by select filters under Articles Filtering Options tab.
- World GeoCoding: It will display map without any markers. But users can search any location from World GeoCoding service.
GeoJSON data file restaurant.json Select a GeoJSON data file. The data folder is: /modules/mod_geekopenstreetmap/data/
Markers List Manage markers

Marker Cluster Options

The marker clustering utility helps you to manage multiple markers at different zoom levels.When a user views the map at a high zoom level, the individual markers show on the map. When the user zooms out, the markers gather together into clusters, to make viewing the map easier.

Setting Default Description
Show Coverage On Hover On When you mouse over a cluster it shows the bounds of its markers.
0Off
1On
Zoom To Bounds On Click On When you click a cluster we zoom to its bounds.
0Off
1On
Spiderfy On Max Zoom On When you click a cluster at the bottom zoom level we spiderfy it so you can see all of its markers. (Note: the spiderfy occurs at the current zoom level if all items within the cluster are still clustered at the maximum zoom level or at zoom specified by Disable Clustering At Zoom setting).
0Off
1On
Remove Outside Visible Bounds On Clusters and markers too far from the viewport are removed from the map for performance.
0Off
1On
Max Cluster Radius (in pixel) 80 The maximum radius that a cluster will cover from the central marker (in pixels). Default 80. Decreasing will make more, smaller clusters. You can also use a function that accepts the current map zoom and returns the maximum cluster radius in pixels.

Search Control Options

Settings of Search Control

Setting Default Description
Position Top Left Select a position of Search Control in the map.
topleftTop Left
toprightTop Right
bottomleftBottom Left
bottomrightBottom Right
Min Length 1 The Minimal text length for autocomplete.
Case Sensitive False Search elements in case sensitive text.
0False
1True
Collapsed True Collapse search control at startup.
0False
1True
Auto Collapse Enabled If enabled, collapse search control after submit.
0Disabled
1Enabled
Placeholder Text Search The short hint that describes the expected value of a search field.
Error Text Location not found Enter an error message.

GeoCoding Search Options

Settings of World GeoCoding Search.

Setting Default Description
Use Map Bounds True Determines if and when the geocoder should use the bounds of the map to filter search results.
- If true the geocoder will always return results in the current map bounds.
- If false it will always search the world.
- If specific zoom level selected, the geocoder will use the bounds of the map for searching only if the map is currently zoomed in far enough.
trueTrue
falseFalse

Articles Filtering Options

Setting Default Description
Article Link Enter custom link to article if any. Leave blank if you are not sure about this setting or want to use default Joomla article link.
Introtext Limit 100 Please enter in a numeric character limit value. The introtext will be trimmed to the number of characters you enter.
Count 0 The number of items to display. The default value of 0 will display all articles.
Featured Articles Show Select to Show, Hide, or Only display Featured Articles.
showShow
hideHide
onlyOnly
Category Filtering Type Inclusive Select Inclusive to Include the Selected Categories, Exclusive to Exclude the Selected Categories.
1Inclusive
0Exclusive
Category Please select one or more categories.
Child Category Articles Exclude Include or Exclude Articles from Child Categories.
1Include
0Exclude
Category Depth 1 The number of child category levels to return.
Tags Select the tag to use.
Author Filtering Type Inclusive Select Inclusive to Include the Selected Authors, Exclusive to Exclude the Selected Authors.
1Inclusive
0Exclusive
Authors Select one or more authors from the list below.
Author Alias Filtering Type Inclusive Select Inclusive to Include the Selected Author Aliases, Exclusive to Exclude the Selected Author Aliases.
1Inclusive
0Exclusive
Author Aliases Select one or more author aliases from the list below.
Article IDs to Exclude Please enter each Article ID on a new line.
Date Filtering Off Select Date Filtering Type.
offOff
rangeDate Range
relativeRelative Date
Date Range Field Created Date Select which date field you want the date range to be applied to.
a.createdCreated Date
a.modifiedModified Date
a.publish_upStart Publishing Date
Start Date Range Please enter a Starting Date.
To Date Please enter an End Date.
Relative Date 30 Please enter a numeric value. Results will be retrieved relative to the current date and the value you enter.

Create GeoJSON files

Geek OpenStreetMap module supports to load data from GeoJSON format files. GeoJSON is an open standard format designed for representing simple geographical features, it supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, and MultiPolygon.

There are many online editor tools that enable you to draw shapes (lines, polygons) and add markers on a map with visualisation tool, then download map data as GeoJSON format files. Below is a list of some online GeoJSON editor website:

After creating and downloading GeoJSON files, you need to upload these files to the data folder of the module:

modules/mod_geekopenstreetmap/data/

Once done, you can select a file to display on your map from the settings panel of the module.

Add map to Articles

After installing the Geek OpenStreetMap package, you will see new a tab name Geek OpenStreetMap on editing the article screen where you can set coordinates of location and select a position to insert a map into an article.

The articles have been set coordinates will be displayed on map module if you select a Data source is that from Articles. You can also narrow a list of articles to display on the map module by selecting filters under the Articles Filtering Options tab of module’ setting panel.