Here we have the tools for saving the map, also you can see any error/warning that may appear
The richest feature that SGM explores is the map places management; we add special attention on this section to make it very natural and easy to use. The Place can be managed from the Places tab, from map toolbar; here we got a list with all map places.
For each place it can be defined:
- Name - identifier for each place on the map
- Location - map coordinates of the place
- Pin animation - add an animation effect on pin
- Rich content - the content that will be showed on click pin
Adding new place can be achieved either by clicking on Add place button, this will add a new place and position it in the center of map (see screenshot above), or by searching a specified address; this will focus map on specified address and add a place there (see screenshot below). A place can be removed by clicking the small right corner x from the list of places.
- Place name represent the label displayed on map pin mouser over. Attention, this is a
required field, if missing the map cannot be saved.
- Place position can be changed by simply drag and drop the pin on map or by manually
modifying the location fields. Attention, if one place location is invalid the map cannot be saved until this is corrected.
- Place icon can be customized, you can select one of the existing icons shipped with the
map or you can upload a custom image form media library. To use a shipped icon, go to “Predefined icons" select (see the second screenshot below) and choose one icon from the existing list (90 custom made icons). To upload a custom image you need to use the “Add icon" button (screenshot below), this will open the upload popup.
Place details represents the pin tooltip, it allows you to be as creative as you want, it supports rich text, images links, video, etc (see screenshot below). The rich editor will always show content of focused place.
General Map Settings
We want to simplify the customization of map setting so we grouped all essential settings, sceenshot below, in the Settings tab of main toolbar. Here we can change the map size, map center, zoom and type.
All modification that are performed here are visible instantaneous in the map canvas.
Note: map center and zoom level can be set also by moving and scrolling up/down the map canvas, the associated fields get updated automatically.
Note: map width and height must be some valid values in pixels, if this fields values are invalid map cannot be saved. Another important aspect is that these fields are not affecting the map canvas; the result can be seen in map preview mode or in the end result on frontend.
SGM come with Google street view integration out of the box this can be enabled by selecting STREET in Map mode from Settings tab of main toolbar. We wanted to take this functionality further so we created a hybrid where we integrated a small navigation map on left top screenshot below. The navigation map can be resized and any operation that user would perform on the traditional map works here too.
Another feature that makes the street view far more valuable is that places can be added on street with the same behavior as we are used to, see screenshot below
SGM enhances the default Google maps controls with an additional Toggle full-screen control that toggles map dimension from fix size to maximum size of browser window (see screenshot below) this way you can see more details about the wanted location.
Driving Direction (Route)
Direction is a feature that allows guiding of end user to a specific place on map (destination) from any arbitrary location (origin). By default this feature is disabled but it can be enabled from Enable direction in Settings tab of main toolbar (see screenshot below).
By enabling direction, an additional button is added to map controls; this button will show the direction panel.
Direction panel lets end user select the destination place on map, select the preferred traffic method for e.g. bicycling and the starting point. Once this information is set, the route will be showed on map as it can be seen on screenshot below.
Complementary to the default direction feature there is the possibility to show some intermediary steps, represented by the purple pins. This can be enabled from Show steps in Settings tab of main toolbar. Each pin contains direction indication; this information is showed also in a separate list under the direction panel (see screenshot below).
Map Look and Feel (Style Tab)
SGM takes advantage of Google styling API, allowing user to create rich experience by customizing maps look and feel. The maps look and feel styling is available on Style tab of main toolbar (see screenshot below).
The map styling is individual for each map and works in a composite manner, this means that each entry in this tab is an individual styling attribute (map element).
To add new styling attribute press Add styling element button then select the Feature type, Element type and the desired Color.
Feature type basically represents the map element that is customized for e.g. this may be the map roads.
Element type represents an individual characteristic of feature for e.g. this may be label text.
The composite map styling is really flexible and powerful. Sreenshots below shows some samples of map styling customization that can be achieved this way.
Custom Overlay (Info Box)
There is certain scenario when the default style of place info box is not fitting the user needs. SGM has a mechanism that overrides the default and allows user to add his custom styling. The custom overlay can be enabled checking Enable custom overlay from Settings tab (see screenshot below).
SCM comes with an out of the box style for custom overlay but user can customize further by modifying map scss file and recompile them.
To update the overlay style:
• Open /cetabo-googlemaps/css/partial/common.scss
• Search for .cinfobox class
• Perform modifications
• Save file
• Recompile /cetabo-googlemaps/css/frontent.scss and /cetabo-
googlemaps/css/backend.scss using for e.g. saas command line tool • $ sass --watch frontend.scss
• $ sass --watch backend.scss
Still there is one more detail to take care of: this kind of modification gets applied globally to all maps that use the custom overlay, so be wise.