This is a WordPress plugin used as companion of the wordpress-sha--importer plugin to visualize imported data of the Syrian Heritage Project on a map
It consist of two parts. A js app written in vue to display the data on a map. And some WP endpoints to serve the data to the map.
- yarn
- node
- vue
To test it in localhost, with CORS disabled start an insecure Chrome instance. For example in OSX:
$ open -n -a "Google Chrome" --args --user-data-dir=/tmp/temp_chrome_user_data_dir http://localhost:8080/ --disable-web-security
yarn install
in src/config.js
the config variables look like this
const config = {
mapbox: {
accessToken: 'example',
languageStyle: {
'ar': 'mapbox://example',
'de': 'mapbox://example',
'en': 'mapbox://example'
}
},
wp: {
// url of the wordpress instance where the plugin is served from
url: 'https://example.example'
}
}
add your mapbox access token to the accessToken
variable
...
mapbox: {
accessToken: 'example',
...
in mapbox create a map with the desired style and assign the languageStyle.en
variable to the style url. En is our default language.
We had some translation bug from mapbox about i18n, so as a workaround you can create a copy of the default map style for each language and assign it to the relative variable.
...
mapbox: {
...
languageStyle: {
'ar': 'mapbox://example',
'de': 'mapbox://example',
'en': 'mapbox://example'
}
...
yarn run serve
yarn run build
before build, be sure to insert the right url of the WP website in src/config.js
For example
...
wp: {
// url of the wordpress instance where the plugin is served from
url: 'https://example.example'
}
...
after build, upload the dist folder to the wp server
yarn run test
yarn run lint