World Map Photo Album
In this tutorial we will be creating a map of the world and providing the option to insert galleries into it.
Drush commands to install and enable if drush is your thing.
drush dl geofield-7.x-1.x-dev openlayers-7.x-2.x-dev libraries-7.x-2.x-dev drush en openlayers_views, openlayers_ui, openlayers, geofield, libraries
I'll be downloading the current dev versions of each, which are required because openlayers has been undergoing changes which affects geofield.
GeoPHP will have to be downloaded separately and put into the libraries folder.
Note because both the OpenLayers & Geofield modules are in development you will see warnings but these will not impede what we are attempting to achieve in this tutorial
A good description of the initial setup is described here http://drupal.org/node/1089574.
Go into Structure -> OpenLayers -> Settings page and select "Geofield Formatter Map". Then add a new map by cloning the "Geofield Formatter Map". Make sure one of the Base Layers is enabled in the "Layers & Styles" section, I'll be using OSM Mapnik.
Go into the field gallery or node gallery manage fields page, we are going to add the geofield field to the node gallery content type. Background details can be found from the field gallery tutorial or node gallery tutorial.
Add the geofield and select the widget to "Openlayers Map'. Inside the edit settings make sure you have selected the Geofield Widget Map.
Now go into the existing galleries and assign a location to the geofield in each of the node galleries (or field galleries if you have added the geofied to the field gallery content type). Here is an example below, note the orange dot at the lower center of the image.
Go into views, we need to create a view that is going to take the geofield and insert it into the openlayers map. Create a new view, then add the "OpenLayers Data Overlay" display view.
Then add the geofield that we created inside the node gallery content type and set the Formatter to "Well Known Text (WKT)".
Change the Unformatted list to "OpenLayers Data Overlayer" and select the style options as such
Add the Type filter criteria and select one of your gallery types.
Save the display view and go back to the Map you created in OpenLayers and enable and activate the name of your view in the "Layers & Styles" section such as the example below.
Now go back to the view and add another display view. I'll be creating a page view but some people may prefer a block view. Set the path, I'll make mine "worldmap", the format to "OpenLayers Map" and the Page:Style options to the map that was created from the OpenLayers module.
Now put the page view path into the main menu and I'll call mine "WorldMap" and you should see something similar to this.
The last step of this tutorial will be to add a pop out which will display a link to the gallery. Go the "Behaviors" section in the OpenLayers's Map you created and select Pop Up box and then the layer which should be directly underneath as such,
Now your worldmap should look like this when you click on one of the orange dots.
If you want to replace the orange dots with something more appropriate or prettier go into the "Styles" section of OpenLayers and add a new style making sure you put a link to the new image in the "externalGraphic "box
If desired you could do something similar to the node images themselves by assigning a geofield to its own image or photo. This tutorial along with the field gallery tutorial and node gallery tutorial shows the flexibility that Drupal gives you when you create your own web applications such as Image Galleries.
By spending the time mastering the Drupal modules you are well placed to extending the functionality of whatever web application you are implementing as demonstrated by adding the worldmap on top of the galleries.
Thanks for dropping by and remember don't forget to flush your cache!
- New post: Posting location co-ordinates to a drupal service - Part 2 http://t.co/MQhlVKBNKC — 1 month 7 hours ago
- New post: Posting location co-ordinates to a drupal service - Part 1 http://t.co/2xlYgqFaJ0 — 1 month 22 hours ago
- New post: Connecting a drupal service with a mobile application - Part 2 http://t.co/01cFtAunDs — 1 month 22 hours ago
- New post: Using drupal services to connect to mobile applications - Part 1 http://t.co/VEURftHCef — 1 month 22 hours ago
- New post: Creating Drupal 7 video gallery http://t.co/HvpKU7uT — 3 months 4 days ago