Setting up the map
The first section of the app-conf contains a number of general settings to configure your map.
Here I am using the same app-conf as the demo site.
I will comment each section to describe what it does.
All code blocks appear with gray background..
The title section can be translated in any number of languages (see Translation notes). If you want the same title in all languages, no problem, just fill in the title for “en” or whatever your primary language may be.
{
"app": {
"title": {
"en": "Crystalball",
"es": "Bola de cristal",
"pt": "Bola de cristal"
},The tagline is a short phrase that appears on the right of the navbar. It’s optional, so if you don’t want it just put "en": " " (or "pt", or whatever your primary language is). Notice that you have to leave one blank space between the quotation marks.
{
"tagline": {
"en": "open-source mapkit",
"es": "mapeo a código abierto",
"pt": "mapeamento de código aberto"
},Here you can put a link to another website. This will open a new tab.
"projectWebsite": "https://wiki.timetochange.today",Next you define the primary language for your map (see Translation notes). This actually defaults to English.
"defaultLanguage": "en",Next you define the color of the navbar, with the primary field, and the color of the active bottom button with the secondary field.
"color": {
"primary": "#00000e",
"secondary": "#7C2CA3"
},Next you define the font. If you want Roboto bold, write: Roboto:wght@700.
"url": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
"family": "Roboto",If you would like Merriweather bold, then replace the block above with this:
"url": "https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap"
"family": "Merriweather",And if you want PT-Sans regular, replace it with this:
url": "https://fonts.googleapis.com/css2?family=PT+Sans&display=swap",
"family": "PT"Check out https://fonts.google.com/specimen/PT+Sans and see all the variations . You can use any of the google fonts. However the italics don’t work.
Next you control the visibility of the legend. If you don’t want the legend to be visible by default, put false here. If false, the user can still open the legend with a click. Notice you don’t need quotes around true or false.
"legend": {
"isVisible": true
},Here you can set the visibility of the controls on the left side of the screen. Just put false if you don’t want one of them.
"controls": {
"locate_me": true,
"share_map": true,
"geocoder": true
},The sidebar can be invisible by default, just put false in that case. You can also set the color, using a hex code or a named color. The same goes for the text color.
"sideBar": {
"isVisible": true,
"backgroundColor": "#f5efe9",
"textColor": "black"
},Next you can choose a dropdown menu. Just put true.
"navbar": {
"dropdownMenu": false
},It’s useful if you want many navbar choices. However, if you choose true you will notice that your menu is now off-centered. To make it look like you would have to go into app/client/src/views/Main.vue, and add two extra spacers at line 48, like this:
v-spacer></v-spacer><v-spacer></v-spacer><v-spacer></v-spacer>Next we have some custom navigation schemes, which alter the behavior of the navbar and router buttons at the bottom:
"customNavigationScheme": "1"The current setting, “1”, activates the LOCAL button at the bottom, to encourage the user to see what is in their area. CustomNavigationScheme “3” is probably the most generally useful one. With customNavigationScheme “3” you can choose to not have bottom buttons at all, and if you do have them, the “zoom to my location” function won’t be applied.
CustomNavigationScheme “2” is quite different. With this setting, the navbar choices only move the map, but they don’t change the visible layers. Only the bottom buttons change the layers. For an example of this, see https://map.casariolab.art, and the app-conf for that map: https://github.com/casariolab/casario-map/blob/master/app/client/public/static/app-conf.json. Notice how the “groups” and “buttons” arrays are configured for customNavigationScheme “2”.
The only settings you may need to change in the block below are the minResolution and maxResolution. We are using resolution rather than zoom, you will have to play around with those numbers and see what they do.
"map": {
"projectionCode": "EPSG:3857",
"minZoom": 1,
"maxZoom": 21,
"zoom": 1,
"geoserverWorkspace": "workspace1",
"resolutions": [
156543.03, 78271.52, 39135.76, 19567.88, 9783.94, 4891.97, 2445.98, 1222.99, 611.5, 305.75, 152.87, 76.437,
38.219, 19.109, 9.5546, 4.7773, 2.3887, 1.1943, 0.5972
],
"center": [0, 0],
"minZoom": 0.25,
"maxResolution": 64000,This concludes the setup instructions.