Customized personalized map
Contents
- 1 Overview
- 2 Achieve customized personalized map
- ##2.1 Template selection method
- 2.2 Personalized editing method
##3 - Personalized Map Success Case
Customized personalized maps allow users to use the JavaScript API to set the style of the map base map (the display color is normal, dark, light color) and control the display of the element classes that make up the map base map. and hiding, to create distinctive maps that meet the specific needs of users, such as hiding certain types of map elements to highlight your own data. The personalized customization function is applicable to all browsers on both PC and mobile phones.
There are currently two ways to customize personalized maps:
1. Select the map through the style template provided by Baidu Map, and then call it through the setMapStyle method of JavaScriptAPI to take effect;
2. Use the personalized map editing tool to edit the map display style yourself, generate the map style json, and then call it through the JavaScript API method to take effect.
The following is the late night map effect:
Template selection method
The template selection method is simple and easy to use. Beginners can choose this method. The steps are as follows:
Step 1: Select a template:Currently, the open platform provides users with a variety of different styles of templates. Click on the template diagram below to enter the template page to view the templates. Developers can choose the templates they are interested in for development.
The template diagram is as follows:
Change style to template The English name below, as shown in the red box in the picture below:
var mapStyle={ style : "*模板英文名称*" } map.setMapStyle(mapStyle);Among them, mapStyle is the MapStyle class, which is expressed in object literal form and cannot be instantiated. style is used to set the basemap color style.
The following is the setting method for mapbox style:
The setting code is as follows:
var mapStyle={ style : "mapbox" } map.setMapStyle(mapStyle);The map effect after setting is as follows:
Personalized editing method
This method means that developers can use personalization The editor generates style configuration json by changing the color, brightness, saturation, text label fill color, text label, etc. of map elements, and then makes the configuration effective by calling the JavaScript API method. The screenshot of the operation page is as follows:
The steps to use the personalized editing tool are as follows:
Step 1: Add style rules:
Style rules are a unified description of elements, attributes and styles. Map styles are composed of multiple style rules. There is one rule by default when editing the first element. Users can modify the map style based on it. When editing subsequent elements, , a rule needs to be re-created.
Step 2: Select elements
After creating the style rules, you need to select the map elements to be modified. The map elements that can currently be modified include the following:
Among them, the map background mainly includes planar elements in the map, such as land, water systems, green spaces, man-made areas, high altitude Buildings at different levels, etc.;
Roads are divided into expressways and national highways, urban main roads, general roads, subways and train lines;
Points of interest refer to point-like elements in the map, such as banks , schools, restaurants, hotels, etc., composed of text annotations and icons.
Administrative divisions include the marking of national boundaries, provincial boundaries, and administrative units such as provinces, cities, counties, and districts.
Step 3: Select attributes
Elements such as roads are composed of text and line elements. The attributes are used to specify whether to modify the text or the border and filling of the line. Color, as shown below, specify the border of the modified road:
Step 4: Select the style
After selecting the attributes, next step Select the style to be modified. If you want to set the color of the road border to red, do as follows:
The preview effect is as follows:
Step 5: Set the map style
To apply the edited map style to your own website, you need to first obtain it from the view json (picture below) Style json,
The setting code is as follows:
var myStyleJson=[ {
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ff0000"
} }];map.setMapStyle({styleJson: myStyleJson });Personalized Map Success Case
The following is the base map used by Baidu Tourism Forecast. This map only shows administrative boundaries without POI, and is overall dark, making the display of forecast information on the map more obvious.
