TripCreator allows you to add your own custom markers on the itinerary map (gas stations, cafes, stops, etc.) To take advantage of this functionality, you must provide a URL in GeoJSON format that TripCreator can use to show your custom markers. This article describes the technical requirements for this GeoJSON url.
URL Requirements
-
The URL must be placed under https (secure http) protocol, plain http is not supported.
-
CORS headers must be set to allow requests from your TripCreator domain (e.g. mycompany.tripcreator.io). You can read more about CORS here.
The URL must be placed under https (secure http) protocol, plain http is not supported.
CORS headers must be set to allow requests from your TripCreator domain (e.g. mycompany.tripcreator.io). You can read more about CORS here.
GeoJSON format
Generally we follow the GeoJSON format, and the markers must be provided via Point type.
But in order to provider better user experience we also support custom properties that better fit into TripCreator itinerary flow.
Full example of all available properties:
-
name - name of the item to show in marker tooltip.
-
marker-icon - image url which should be shown as map marker. Optional.
-
marker-symbol - symbol which should be shown as map marker. Optional. For supported symbols, please see list below.
-
day-index - if set, defines which itinerary day this marker belongs to (starting from 1). If not set, it will be visible on all days. Optional.
-
image - image url which should be shown in the tooltip.
name - name of the item to show in marker tooltip.
marker-icon - image url which should be shown as map marker. Optional.
marker-symbol - symbol which should be shown as map marker. Optional. For supported symbols, please see list below.
day-index - if set, defines which itinerary day this marker belongs to (starting from 1). If not set, it will be visible on all days. Optional.
image - image url which should be shown in the tooltip.
So if you would like to display electric car charging stations in London with a charging station symbol, your GeoJSON might look like this:
Supported marker symbols
We support a subset of icons from Font Awesome collection as marker symbols. The following icons are supported:
- charging-station
- search
- arrow-left
- times-circle
- calendar
- times
- minus
- plus
- upload
- link
- stopwatch
- plane
- plane-departure
- plane-arrival
- car
- home-alt
- hotel
- hiking
- utensils
- bus
- train
- cars
- taxi
- ship
- calendar-check
- pencil
- plus-circle
- code
- map-marker-alt
- globe-americas
- boot
- person-sign
- car-bus
- bed
- layer-group
- map-marker-plus
- ellipsis-v
- pen
- info-circle
- credit-card
- university
- money-check-alt
- circle
- dot-circle
- eye
- eye-slash
- th-list
- envelope
- window
- clock
- bars
- question-circle
- user
- map-marker
- check-circle
- trash
- ellipsis-h
- redo
- check
- external-link-square
- box
- box-open
- box-check
- user-circle
- power-off
- map-marked-alt
- question-cricle
- map-marker-edit
- plus-circle
- usd-circle
- page-break
- address-card
- share-alt
- repeat-alt
- spinner
- users
- linkedin-in
- weixin
- facebook-f
- skype
- shopping-cart
- ballot-check
- file-alt
- clone
- dollar-sign
- cog
- user-friends
- lock-alt
- lock-open-alt
- exclamation-triangle
- globe
- user-check
- crop
- check-square
- square
- minus-square
- sync
- chair-office
- expand-arrows
- filter
- route
- walking
- utensils-alt
- running
- ticket-alt
- dice
- film-alt
- hat-chef
- calendar-week
- fish
- dumbbell
- landmark
- spa
- swimming-pool
- theater-masks
- wine-glass
- elephant
- city
- umbrella-beach
- mountains
- rv
- chess-rook
- anchor
- golf-ball
- wagon-covered
- trees
- tornado
- tree-large
- camera
- place-of-worship
- bags-shopping
- camcorder
- gift
- pie
- glass-martini
- coffee
- store
- plane-alt
- helicopter
- biking
- building
- image
- download
- star
Did this answer your question?😞😐😃