Using OpenStreetMaps in DJ-Classifieds

Using OpenStreetMaps in DJ-Classifieds

Full support for OpenStreetMaps in DJ-Classifieds component

The OpenStreetMap is a new equivalent for Google Maps. As you may know, Google recently updated its policy for using Google Maps.

This changes add limits for free usage and require users to attach their credit cards to the account, which is not accepted or cannot be processed by some organizations. Google Maps can also be limited in certain countries - so this is where OpenStreetMap steps in.

Thanks to the OpenStreetMap support you don’t have to worry about Google restrictions and do not have to provide the Credit Card information.



Configuration

DJ-Classifieds uses the Google Maps API by default. To enable OpenStreetMaps maps, you need to publish the “DJ-Classifieds - Leaflet Maps” because it is disabled by default. 


After enabling the plugin, the map provider will change automatically in the global DJ-Classifieds options  (as well as in map modules ):



The enabled plugin allows you automatically to start using OpenStreetMaps instead of other interactive maps.

If you want to switch from Google Maps to OpenStreetMap, you need to enable "DJ-Classifieds - Leaflet Maps" plugin.

Other information that may be useful when configuring individual options related to maps and locations:

  1. Configure map settings in DJ-Classifieds options
  2. Configure map settings in the Search module
  3. Configure map settings in Maps module

Possibilities

Where can you display maps?

Maps can be used in various views. OpenStreetMap is supported in these views and modules:
  1. Add item view (submission form)
  2. Single ad view (click to see the demo)
  3. User profile and User profile editing views (click to see the demo)
  4. Maps modules (click to see the demo)
  5. User registration view

OpenStreetMap in DJ-Classifieds New Advert form


Map settings available during the new advert submission can be configured in the DJ-Classifieds options.
These options are available for OpenStreetMaps:
  1. Places hints in address - decide if you want to display hints in address field during the advert submission process.
  2. Allow to provide coordinates – Decide if you want to allow advertisers to add GPS coordinates during the advert submission process.
  3. The default address for coordinates map – Default address for a map where user can select coordinates
  4. Scroll wheel zooming - Scrollwheel zooming on the map during advert creation and in advert details.
  5. Maps icon – if you want to use the custom icon on maps, set it to 'custom' and put your custom icon to /images/ folder with name: djcf_gmicon.png
There is a possibility to decide whether the longitude and latitude fields in advert submission form should be used. Learn more: Hide longitude and latitude in the submission form.

OpenStreetMaps in DJ-Classifieds Advert's detail page


The information below the map, including Geographic coordinates and a reference that "Map location might not be exact."
Map settings available in the advert view can be configured in the DJ-Classifieds options.
Available options for OpenStreetMaps are:
  1. The default address for coordinates map – Default address for a map where user can select coordinates
  2. Show coordinates – Show/hide geographic coordinates under the map in advert details.
  3. Show map – Show/hide Google Map in advert details.
  4. Map img on start - show in advert details image with the button that will show map.
  5. Map Zoom – Default map zoom in advert details.
  6. Scroll wheel zooming - Scrollwheel zooming on the map during advert creation and in advert details.
  7. Maps icon – if you want to use the custom icon on maps, set it to 'custom' and put your custom icon to /images/ folder with name: djcf_gmicon.png

OpenStreetMaps in DJ-Classifieds User profile view:


Options for displaying a map on the user profile view are available in the DJ-Classifieds options, in the "Views" tab.

Learn more in the DJ-Classifieds options.
Another example. This time for the DJ-Classifieds map module:

All settings for this view are available to configure in the Maps module
We have a demo site for DJ-Classifieds, where you can check different views: OpenStreetMap version.

POI (Points of Interest) in OpenStreetMap.

One of the new features you can use with the OSM is hints (suggestions) that appear in the search module when using the Address field and the submission form. Similar to what you may know from Google Maps features when the user starts typing in one of those fields - the suggestions pulled via OSM API are displayed and can be clicked to use as a search.

Geolocation services

OSM provides the geolocation services and the "Use my location" button in the submission form of the advert or the location icon in the search module - the map (in the submission form) and location address in the address field in the search module is updated. It can be used to search by range.

Maps module parameter - "Fit items."

Using this option, the map module will display the view that will cover all the items from DJ-Classifieds. For example - if your site has adverts from all over the world - the map will be zoomed out to the whole world, but if your website is limited to some smaller location range, it will fit the zoom of the map to display all of the items from this area.

Another parameter in the maps module that works with the OSM - "Start address from geolocation" - when this is set the page where the map module is displayed will use geolocation to centre the map where the user is. This is a good solution if you want to show the items close to the user.

Driving directions

The map included in the single advert view contains Driving directions field where you can type your address. This will redirect you to the OpenStreetMaps website to receive information about getting to the advert location.

You can make it quicker and click the "Use my location" button. Your location will be determined based on geolocation services.


Map driving directions option can be enabled or disabled in the DJ-Classifieds component options. Open the "Global" tab and scroll down to "Map & Location settings".


      • Related Articles

      • How to set the Leaflet OpenStreetMap in the component and Maps module

        Support for OpenStreetMaps in DJ-Classifieds component DJ-Classifieds uses the Google Maps API by default. To enable OpenStreetMaps maps, you need to publish the “DJ-Classifieds - Leaflet Maps” because it is disabled by default.  After enabling the ...
      • Disable mouse zoom scrolling in Google Maps

        You can disable the Google Maps scrolling in DJ-Classifieds Google Maps module and component. Check video explaining how it works: Module Open Google Maps module and change the Mouse zoom scrolling settings to "No" (1) Save the module (2)   Advert's ...
      • Custom Google Maps Styles

        You can use your Google Maps styles in component (Advert details) and Google Maps modules. Adjusting the map's look and feel is as easy as copying and pasting JSON code to fields in DJ-Classifieds. Where to get Google Maps styles? There are many ...
      • Display all locations/regions in one view

        The regions tree component view lets you display all the locations/regions in one view, so you can show your users all the places where your website gets the adverts. These regions list is based on the locations created by the Administrator. Learn ...
      • Hide longitude and latitude in submission form

        If you think that longitude and latitude fields in advert submission form can be confusing, you can hide them. Find the parameter in Options -> Global -> Map & Location Settings section where you can select whether you’d like to use longitude and ...