Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove Google Maps code in favor of Mapbox #37153

Merged
merged 3 commits into from
Oct 9, 2020
Merged

Remove Google Maps code in favor of Mapbox #37153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1574f90
Remove google maps code and add some styling to the popups
bethanyaconnor Oct 8, 2020
365a68e
Change cluster color and remove unused code
bethanyaconnor Oct 9, 2020
3170b4c
Remove extra line
bethanyaconnor Oct 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
223 changes: 9 additions & 214 deletions apps/src/sites/code.org/pages/views/workshop_search.js
View file
Open in desktop
@@ -1,34 +1,13 @@
/* globals google, mapboxgl, MapboxGeocoder */
/* globals mapboxgl, MapboxGeocoder */

import $ from 'jquery';
import colors from '@cdo/apps/util/color';
import MarkerClusterer from 'node-js-marker-clusterer';
import getScriptData from '@cdo/apps/util/getScriptData';
import {SubjectNames} from '@cdo/apps/generated/pd/sharedWorkshopConstants';

const markerCustererOptions = {
imagePath: getScriptData('workshopSearch').imagePath,
gridSize: 10
};

var map,
markersByLocation = {},
infoWindow,
markerClusterer;
var map;

$(document).ready(function() {
if (window.location.search.includes('mapbox')) {
$('#gmap').hide();
$('#mapbox-map').show();
$('#geocomplete').hide();
$('#geocomplete-form').hide();
$('#mapboxgeocoder').show();
initializeMapboxMap();
map.on('load', loadMapboxWorkshops);
} else {
initializeGoogleMap();
loadGoogleMapWorkshops();
}
initializeMapboxMap();
map.on('load', loadMapboxWorkshops);
});

function initializeMapboxMap() {
Expand Down Expand Up @@ -93,7 +72,7 @@ function placeClusters() {
source: 'workshops',
filter: ['has', 'point_count'],
paint: {
'circle-color': colors['teal'],
'circle-color': colors.purple,
'circle-radius': 20,
'circle-blur': 0.75
}
Expand Down Expand Up @@ -205,10 +184,10 @@ function onMarkerClick(e) {
var workshops = JSON.parse(e.features[0].properties['workshops']);
const description = compileMapboxPopupHtml(workshops, false);

new mapboxgl.Popup()
const popup = new mapboxgl.Popup({className: 'popup'})
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
.setHTML(description);
popup.addTo(map);
}

function compileMapboxPopupHtml(workshops, first) {
Expand Down Expand Up @@ -249,192 +228,8 @@ function compileMapboxPopupHtml(workshops, first) {
url +
'>Info and Signup</a></div>';
}
html += '</div>';
});

html += '</div>';

return html;
}

function initializeGoogleMap() {
var mapOptions = {
center: new google.maps.LatLng(37.6, -95.665),
zoom: 4,
minZoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('gmap'), mapOptions);
infoWindow = new google.maps.InfoWindow();
}

function loadGoogleMapWorkshops() {
markerClusterer = new MarkerClusterer(map, [], markerCustererOptions);

const deepDiveOnly = $('#properties').attr('data-deep-dive-only');
let url = '/dashboardapi/v1/pd/k5workshops';
if (deepDiveOnly !== undefined) {
url += '?deep_dive_only=1';
}

$.get(url)
.done(function(data) {
processPdWorkshops(data);
})
.always(completeProcessingPdWorkshops);
}

function processPdWorkshops(workshops) {
$.each(workshops, function(i, workshop) {
var location = workshop.processed_location;
var latLng = new google.maps.LatLng(location.latitude, location.longitude);
var hash = latLng.toUrlValue();

var infoWindowContent = '';

if (markersByLocation[hash] === undefined) {
infoWindowContent = compileHtml(workshop, true);
markersByLocation[hash] = createNewMarker(
latLng,
workshop.location_name,
infoWindowContent,
workshop.subject
);
} else {
// Extend existing marker.
infoWindowContent = compileHtml(workshop, false);
markersByLocation[hash].infoWindowContent += infoWindowContent;
// Upgrade any marker containing a deep dive workshop to the deep dive icon
if (workshop.subject === SubjectNames.SUBJECT_CSF_201) {
markersByLocation[hash].icon = iconForSubject(workshop.subject);
}
}
});
}

function createNewMarker(latLng, title, infoWindowContent, subject) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: title,
infoWindowContent: infoWindowContent,
icon: iconForSubject(subject)
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(this.get('infoWindowContent'));
infoWindow.open(map, this);
});
markerClusterer.addMarker(marker);
return marker;
}

const iconForSubject = subject => ({
url:
subject === SubjectNames.SUBJECT_CSF_201
? 'https://maps.google.com/mapfiles/kml/paddle/red-stars.png'
: 'https://maps.google.com/mapfiles/kml/paddle/red-blank.png',
scaledSize: new google.maps.Size(40, 40)
});

function completeProcessingPdWorkshops() {
addGeocomplete();
}

function compileHtml(workshop, first) {
// Compile HTML.
var html = '';

if (first) {
html += '<div class="workshop-item workshop-item-first">';
} else {
html += '<div class="workshop-item">';
}
html +=
'<div class="workshop-location-name"><strong>' +
workshop.location_name +
'</strong></div>';

// Add the workshop subject
html +=
'<div class="workshop-subject">' + workshop.subject + ' Workshop</div>';

// Add the date(s).
html += '<div class="workshop-dates">';
$.each(workshop.sessions, function(i, session) {
html +=
'<div class="workshop-date" style="white-space: nowrap;">' +
session +
'</div>';
});
html += '</div>';

var code_studio_root = $('#properties').attr('data-studio-url');
var url = code_studio_root + '/pd/workshops/' + workshop.id + '/enroll';
if (workshop.id) {
html +=
'<div class="workshop-link"><a style="" href=' +
url +
'>Info and Signup</a></div>';
}
html += '</div>';

return html;
}

function addGeocomplete() {
var geocomplete_options = {
country: 'us'
};

if (html5_storage_supported() && localStorage['geocomplete'] !== undefined) {
geocomplete_options.location = localStorage['geocomplete'];
}

$('#geocomplete')
.geocomplete(geocomplete_options)
.bind('geocode:result', function(event, result) {
map.fitBounds(result.geometry.viewport);

var bounds = map.getBounds();
var marker_found = false;

while (!marker_found && map.getZoom() > 4) {
$.each(markersByLocation, function(index, marker) {
if (bounds.contains(marker.getPosition())) {
marker_found = true;
}
});

if (!marker_found) {
map.setZoom(map.getZoom() - 1);
bounds = map.getBounds();
}
}

if (html5_storage_supported()) {
localStorage['geocomplete'] = result.formatted_address;
}
});

$('#btn-submit').click(function() {
$('#geocomplete').trigger('geocode');
});

$('#btn-reset').click(function() {
$('#geocomplete').val('');
map.setCenter(new google.maps.LatLng(37.6, -95.665));
map.setZoom(4);
infoWindow.close();
if (html5_storage_supported()) {
localStorage.removeItem('geocomplete');
}
});
}

function html5_storage_supported() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
18 changes: 9 additions & 9 deletions pegasus/sites.v3/code.org/views/workshop_search.haml
View file
Open in desktop
Expand Up @@ -29,7 +29,6 @@
z-index: 1;
left: 50%;
margin-top: 0px;
display: none;
}
.mapboxgl-ctrl-geocoder {
min-width: 100%;
Expand All @@ -48,10 +47,17 @@
width: 100%;
padding-bottom: 56.25%;
border: 3px solid #ddd;
display: none;
}
.popup {
max-width: none !important;
}
.popup button {
color: black;
padding-top: 2px;
height: auto;
}
#mapbox-map button {
margin: 0
margin: 0;
}

.row
Expand All @@ -60,15 +66,9 @@
.col-xs-4
.form-group
%div#mapboxgeocoder{class: 'geocoder'}
%input#geocomplete.form-control{name: "geocomplete", placeholder: "Search for workshops", type: "text"}/
.col-xs-8
#geocomplete-form.form-group
%button#btn-submit{type: "submit", style: "margin-top: 0px"} Search
%button#btn-reset.btn-link{type: "reset", style: "margin-top: 0px"} Reset
.row
.col-xs-12
#mapbox-map
#gmap{style: 'height: 500px; padding: 3px; border: 3px solid #ddd;'}

#properties{'data-studio-url': CDO.studio_url, 'data-deep-dive-only': deep_dive_only}

Expand Down