-
Notifications
You must be signed in to change notification settings - Fork 9
deprecated Getting started with a non bundled project
This was offered as a way to get people to use mapboard without adding a number of installations to their computer.
It is no longer possible to use this method with the latest updates of Mapboard. It can still be used with earlier versions, but it is highly recommended that you follow the Vue Project instructions.
Code for a nonbundled example is available: the nonbundled branch of Atlas.
You can see that code running as a site live here.
As you can see in the nonbundled branch of Atlas example, a nonbundled project is essentially just a folder containing images (jpgs and things you want on your site), and 3 flat files:
- index.html
- main.js
- styles.css
To get started, you'll need to add the following tags to your HTML file.
The following snippets are provided for convenience but may not be as up-to-date as the code in the example given above.
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/phila-app.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<link rel="stylesheet" href="//unpkg.com/[email protected]/src/easy-button.css">
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet-vector-markers.css">
<link rel="stylesheet" href="https://s3.amazonaws.com/leaflet-measure-flatfiles/leaflet-measure.css">
<link rel="stylesheet" href="styles.css">
These are best added to the bottom of the HTML file, just before the closing
</body>
tag.
<!-- JS: Foundation -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<!-- JS: Mapboard dependencies -->
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="//unpkg.com/@fortawesome/[email protected]/js/fontawesome.js"></script>
<script src="//unpkg.com/@fortawesome/[email protected]/index.js"></script>
<script src="//unpkg.com/@fortawesome/[email protected]/index.js"></script>
<script src="//unpkg.com/@fortawesome/[email protected]/index.js"></script>
<script>var vueFontAwesome = window['vue-fontawesome'];</script>
<script src="//unpkg.com/[email protected]/lodash.js"></script>
<script>var debounce = _.debounce;</script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="http://cdn.date-fns.org/v2.0.0-alpha0/date_fns.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
<script src="//unpkg.com/[email protected]"></script>
<script src="//unpkg.com/[email protected]/turf.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
<script src="//unpkg.com/[email protected]/src/easy-button.js"></script>
<script src="//cityofphiladelphia.github.io/leaflet-vector-icon/dist/leaflet-vector-icon.js"></script>
<script src="//unpkg.com/[email protected]"></script>
<script src="//unpkg.com/[email protected]"></script>
<script src="//s3.amazonaws.com/leaflet-measure-flatfiles/leaflet-measure.js"></script>
<!-- JS: Cyclomedia (optional) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/4.1.0/ol.js"></script>
<script src="//s3.amazonaws.com/cyclomedia-mapboard/cyclomedia-mapboard.js"></script>
<!-- JS: Pictometry (optional) -->
<script src="//unpkg.com/[email protected]/js/md5.min.js"></script>
<!-- JS: Local -->
<script src="//cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>
<!-- Mapboard -->
<script src="//unpkg.com/@cityofphiladelphia/[email protected]/dist/phila-vue-datafetch.js"></script>
<script src="//unpkg.com/@cityofphiladelphia/[email protected]/dist/phila-vue-mapping.js"></script>
<script src="//unpkg.com/@cityofphiladelphia/[email protected]/dist/phila-vue-comps.js"></script>
<script src="//unpkg.com/@cityofphiladelphia/[email protected]/dist/mapboard.js"></script>
In a bundled project, your Mapboard pulls in the correct versions of phila-vue-comps, phila-vue-mapping, and phila-vue-datafetch automatically. In an unbundled project, where the libraries are incorporated via CDN, you have to use the correct versions which go with your Mapboard version. You can use this table to determine which versions to use:
Mapboard | phila-vue-mapping | phila-vue-comps | phila-vue-datafetch |
---|---|---|---|
3.0.23 | 1.0.19 | 1.0.21 | 0.0.14 |
3.0.22 | 1.0.19 | 1.0.20 | 0.0.13 |
3.0.21 | 1.0.17 | 1.0.19 | 0.0.13 |
3.0.20 | 1.0.17 | 1.0.18 | 0.0.13 |
3.0.19 | 1.0.15 | 1.0.17 | 0.0.13 |
3.0.18 | 1.0.13 | 1.0.15 | 0.0.13 |
3.0.17 | 1.0.12 | 1.0.15 | 0.0.13 |
3.0.16 | 1.0.11 | 1.0.14 | 0.0.12 |
3.0.15 | 1.0.11 | 1.0.12 | 0.0.12 |
3.0.14 | 1.0.8 | 1.0.11 | 0.0.12 |
3.0.13 | 1.0.7 | 1.0.9 | 0.0.11 |
3.0.12 | 1.0.7 | 1.0.9 | 0.0.11 |
3.0.11 | 1.0.7 | 1.0.9 | 0.0.11 |
3.0.10 | 1.0.7 | 1.0.9 | 0.0.11 |
3.0.9 | 1.0.7 | 1.0.9 | 0.0.11 |
3.0.8 | 1.0.7 | 1.0.9 | 0.0.11 |
3.0.7 | 1.0.6 | 1.0.8 | 0.0.11 |
3.0.6 | 1.0.5 | 1.0.6 | 0.0.10 |
3.0.5 | 1.0.5 | 1.0.5 | 0.0.10 |
3.0.4 | 1.0.5 | 1.0.4 | 0.0.10 |
3.0.2 | 1.0.2 | 1.0.3 | 0.0.9 |
3.0.1 | 1.0.1 | 1.0.2 | 0.0.9 |
3.0.0 | 1.0.0 | 1.0.0 | 0.0.9 |
2.0.24 | 0.0.8 | 0.0.9 | 0.0.8 |
2.0.23 | 0.0.8 | 0.0.7 | 0.0.7 |
2.0.22 | 0.0.7 | 0.0.6 | 0.0.6 |
2.0.21 | 0.0.6 | 0.0.4 | 0.0.4 |
2.0.20 | 0.0.6 | 0.0.4 | 0.0.4 |
2.0.19 | 0.0.5 | 0.0.3 | 0.0.3 |
2.0.18 | 0.0.5 | 0.0.2 | 0.0.3 |
2.0.17 | 0.0.5 | 0.0.2 | 0.0.2 |
2.0.16 | 0.0.5 | 0.0.2 | |
2.0.15 | 0.0.5 | 0.0.2 |
Before we start configuring a Mapboard, we'll need an empty DOM element for it to mount to. Add a tag like this wherever you'd like your Mapboard to appear:
<div id="mapboard"></div>
You can use a different
id
and specify it in the config. See below for details.
Now that we've added the Mapboard JavaScript library to our HTML, we have access to the Mapboard
global variable which allows us to create and configure the Mapboard itself. The basic pattern is:
mapboard.default({
// config options will go here
});
You can add that to your existing JavaScript, or create a new file (e.g. mapboard.js
) and reference it in your HTML. Note that Mapboard won't initialize without some required options, so if you run that code you might get a few errors at this point.
.greeting > h2 {
margin-bottom: 30px;
}
.greeting > .callout {
border-color: #58c04d;
background: #fff;
/*margin: 0 0 1rem 0;*/
padding: 1rem;
}
.greeting > .callout > ul {
margin: 0 0 0 1.42857rem;
padding: 0 0 0 1.42857rem;
}
#application .site-header, #application .app-footer {
background: #2176d2;
}
#application .site-header .page-title-container h1 {
font-size: 2.14286rem;
}
/*this fixes an issue with the topic panel scrolling over the footer padding*/
#application .app-footer {
position: relative;
}
/*small*/
@media screen and (max-width: 39.9375em) {
.logo {
float: left;
}
.page-title-container {
float: right;
}
}