This Github project provides a scrollable map powered by Google Maps, that displays spots like Points of Interest as pinpoints, and when you click on them, you can see more details.
Our spotmap database contains more than 6,000 spots, but it could as well contain 50,000 spots. Each spot has a geographical location (longitude, latitude), a name (title), some description, and it could have one or more photos attached.
This project also provides a means of clustering spots to save bandwidth and memory usage for geospatial filtering.
This Github project contains the sources for the Parkour.org Spotmap. The intention of the spotmap
In the Parkour world, people like to travel, meet up and share interesting places to do training together. We want to support the Parkour community by providing an easy way to find and discover interesting places when you travel and in your neighbourhood.
Our intention is not to keep people attached to a website or show advertisement, generate revenue or achieve a level of commercialization. Ideally, people use this as a tool, like Wikipedia or online translators, and then get out to train together.
The spots are mostly user-generated and often clustered around big cities. Our previous spotmap hat problems with handling the vast amount of spots that were added over time, and network bandwidth, memory usage and loading time was important to make this experience enjoyable, so an optimization was necessary.
This project combines a front-end with an optimized backend to improve the performance of the spotmap. Further optimizations are still possible, like server-side or client-side caching of requests, offline-first features or preloading important files, static responses and alike. But we can come back to this once we hit more than 50k hits per hour.
This current version only displays the most important information about spots. The following fields - may they exist - are not displayed in the current release of the Spotmap:
- Edit history
- Postal Address
- Telephone numbers
- Workshops that take place on that spot (including age, price, time span, recurrence, buying tickets)
Browse - A user can navigate to a part of the map and retrieve all the spots in sight. If the zoom level is too small, adjacent spots will be grouped to magnifying glasses.
Details - If a user clicks on a spot, its name is shown. Clicking on the name will show a page containing at least the title, description, coordinates and a link to Google Maps. Pictures, categories and other information is shown if available.
Insert - If a user clicks on an empty area, a draggable crosshair appears. Clicking it again will give him a choice to create certain types of spots. An input mask will appear to write some title and text and save it. After saving (hence having assigned a primary ID to that spot), a more sophisticated form will be shown to allow adding images.
Modify - On the details page, a link is shown (Open in main website), and on the website, the edit form could be opened.
Search - A full text search is available from the map screen using the search button. Our simplified implementation only looks for substring matches in the title. The results page displays the spots using its first photo, its title and an abstract of the description.
Filter - can show / hide spots of certain categories on the map. Filters could become more sophisticated in future.
TL;DR: Install nodeJS, Grunt, run npm install and
type grunt default.
Install this module by typing npm install in this
root directory. If you don't have npm installed,
visit npmjs.com.
Copy the content of the dist folder on a server and run. It can run without any of the frameworks RequireJS, CommonJS and Node.js
In your web page:
<script src="spotmap.min.js"></script>You can also use the file dist/index.htm,
which provides a HTML5 GUI to the spotmap project.
Lint and test this code using
Grunt. If you have the Grunt
CLI installed globally using npm install -g grunt-cli and executed npm install previously,
you can use the following commands:
grunt test will run jshint and tests using the
files from the lib directory.
grunt default will run jshint, tests, squash the
libraries into one file, modify the HTML, remove
the dependency to requireJS, backport the code
to ES5, uglify the result and finally run an
end-to-end test to ensure compatibility.
TODO: Compass CSS, cssmin and LESS/SASS/SCSS support
This spotmap is currently in active development. Many features are yet to be improved. Updates to this repository will be reflected on our server hosted at map.parkour.org.
Added:
- CSS minification now live
- Much smaller loading image
- Clustering takes the amount of available pixels into account
- Map remembers last position, unless Geolocation is used
- Spot titles are shown in blue to encourage clicking
Fixed:
- Non-clickable area in map behind vanished filter
Added:
- Link to Github project in help text
- Description for Social Media Pages
- Load HTML content into page
- CSS minification
- JS minification now live
Changed:
- Script injection can be controlled and lazy
- Finer control of filters
- Horizontal map mode on spot details page
Removed:
- 'Show on web' button
Fixed:
- Abort Creation from existing spot prevents opening spot again.
- Unexpected scrolling to geolocation
Added:
- Link to Github project in help text
Fixed:
- Show new marker on map after creation
Added:
- Translation files for IT, NL and DA
- Injectable files in distribution folder for experimental features
Removed:
- Invisible error messages for missing content, etc.
- Unused translations
Added:
- GDPR prompt on first load
Changed:
- Better alt text for magnifiers
Removed:
- Unneccessary log messages
Fixed:
- Language not properly detected
- Panning updates Location URL with delays due to issues with Safari on iOS
- Avoid JavaScript errors when Map not loaded
- Cleaner injection of scripts
Added:
- Backend code to perform regional pinpoint updates
Changed:
- Better alt text for magnifiers
Removed:
- Legacy backend code for geospatial search
Fixed:
- Add spot was missing the category 'outdoor'
- Map no longer pans to GPS on load after showing spot
Added:
- Filter HTML and add Newline in Spot creation
Added:
- Invisible Captchas for new spot creation
- Lazy load scripts (e.g. reCAPTCHA) on form load
- Translations for new form fields
Changed:
- Navigates to login on form load when username missing
- Headers sent for new spot creation
Fixed:
- GPS pans map on page load
- Users can now click through GPS circle
- Restore saved spots when username missing
- Translations for spot features
Added:
- Clickable images in spot description
- Category choice in editor
- Show more search results
Changed:
- Display spot category and feature
- Submit editor values, now includes username
- Login form text changed, password field removed
Fixed:
- Character encoding in search
Added:
- Show more pictures per spot
- Create/modify date and author
Changed:
- Changed from Drupal 8 to our own REST backend Fixed:
- Babel version was deprecated. Moved to Babel 6
Changed:
- Integrate spotmap into our existing Drupal 7 / Drupal 8 website
Please refer to the Commit history for more detailed development logs.
Copyright (c) 2017-2018 Björn Eberhardt Licensed under the MIT license.