Posted by boragunesdogan on December 2, 2013 at 10:29pm
Hi all,
I have a fresh Drupal installation with OpenLayers on http://www.hartaicristanbul.ro/ . I wonder if it is possible to use Google Maps Directions functionality with OpenLayers.
https://drupal.org/project/getdirections module achieves this without OpenLayers; but I need OpenLayers for displaying my attractions on the Map with tooltip.
Comments
Here is my solution
I realized that there was no OpenLayers and Google Maps Directions interaction yet. As you can check form http://www.hartaicristanbul.ro/ I used OpenLayers for displaying some attractions in Istanbul.
I also used JS Injector to change OpenLayersPopup behavior for displaying each attraction.
For Google Maps Directions, I used Get Directions in a Colorbox Node popup.
Most of the development time was spent on trying to get OpenLayersPopup theming (for attaching click event) and an annoying AJAX error during Colorbox Node usage.
Here is the JavaScript code I injected:
Drupal.settings.nid = Drupal.settings.nid || [];
Drupal.settings.getAllFeature;
function my_map() {
var current_layer = Drupal.openlayers.popup.popupSelect.layer
var all_features_in_layer = current_layer.features;
for(var key2 in all_features_in_layer) {
var current_feature = all_features_in_layer[key2];
Drupal.settings.nid[current_feature.attributes.nid] = current_feature;
}
}
function show_popup(nid) {
if (Drupal.settings.nid) {
var feature = Drupal.settings.nid[nid];
Drupal.openlayers.popup.popupSelect.clickFeature(feature);
}
}
var colorBoxNodeRunTime = new Date().getTime();
function openColorboxNode(uri, nid, obj) {
//! prevent rerun :)
var currentTime = new Date().getTime();
if (currentTime - colorBoxNodeRunTime < 3000) return false;
colorBoxNodeRunTime = new Date().getTime();
jQuery(obj).colorboxNode();
return false;
}
function openColorbox(obj) {
jQuery.colorbox({href:jQuery(obj).attr('href')});
return false;
}
jQuery(document).ready(function($){
my_map();
$('.attraction-link').click(function() {
show_popup($(this).attr('data-nid'));
return false;
});
Drupal.theme.openlayersPopup = function(feature) {
var output = '';
var colorboxNodeScript = 'direction-link" onclick="openColorboxNode(\'getdirections_box/location/to/' + feature.attributes.nid + '?width=800&height=600&iframe=true' + '\', ' + feature.attributes.nid + ', this); return false;"';
feature.attributes.description = feature.attributes.description.replace("direction-link colorbox-node\"", colorboxNodeScript, "g");
var colorboxScript = 'colorbox" onclick="openColorbox(this); return false;"';
feature.attributes.description = feature.attributes.description.replace("colorbox\"", colorboxScript, "g");
if (feature.attributes.name) {
output += '<div class="openlayers-popup openlayers-tooltip-name">' + feature.attributes.name + '</div>';
}
if (feature.attributes.description) {
output += '<div class="openlayers-popup openlayers-tooltip-description">' + feature.attributes.description + '</div>';
}
return output;
}
});
http://randomind.com
How to input directions?
Hi,
looks great!
How did you manage to input Google Directions into Open Layers? Do I need to create a customs module?
My content has address A and B and I need to get the route (direction) to be viewed in open layers.