0

I am currently using this plugin:

https://github.com/jlord/hack-spots

which works really nice in conjunction with Google Sheets.

My goal is to convert this site into my own purposes. One of the step is the change of map tile, which belongs to Mapbox in this case.

As we know, Leaflet has only 1 crs. I believe, that Mapbox too.

I tried to incorporate the Ordnance Survey map layer as per the plugin here:

https://github.com/OrdnanceSurvey/OS-Maps-API

using code such this:

       var epsg27700 = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.999601 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.060,0.1502,0.2470,0.8421,-20.4894 +datum=OSGB36 +units=m +no_defs";
var crs = new L.Proj.CRS(
'EPSG:27700',
epsg27700, {
    transformation: new L.Transformation(1, 238375, -1, 1376256),
    resolutions: [896.0, 448.0, 224.0, 112.0, 56.0, 28.0, 14.0, 7.0, 3.5, 1.75, 0.875, 0.4375, 0.21875, 0.109375],
});



    document.addEventListener('DOMContentLoaded', function() {
        var gData
        var URL = "1heE0vbbWsQD3Gd2VyAYKukzyyE4sduoJ4dH5T_mWQUA"
            Tabletop.init({ key: URL, callback: showInfo, simpleSheet: true 
    })
    })

    // so long, so messy
    function showInfo(gData) {
        tableOptions = {
            "data": gData,
            "tableDiv": "#hackSpotsTable",
            "filterDiv": "#tableFilter"
        }
        // make the table, and the search bar
        Sheetsee.makeTable(tableOptions)
        Sheetsee.initiateTableFilter(tableOptions)

        // create geoJSON with coordinates and other
        // useful bits from the original data
        var optionsJSON = ["order", "address", "city", "status"]
        var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)

        // create map, tilelayer (map background), markers and popups
        var map = Sheetsee.loadMap("map", {
        crs: crs,
        layers: Road,
        zoomControl: true,
        maxZoom: 13,
        minZoom: 0,
        })












       Sheetsee.addTileLayer(' https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/zxy/{tilematrixSet}/{layer}/{z}/{x}/{y}.{imgFormat}?key={key}', {
key: OS_API_KEY,
tilematrixSet: 'EPSG:27700',
layer: 'Road 27700',
imgFormat: 'png',
continuousWorld: true
     })
                   var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, " 

{{ order }}

", true)

        // find the latest spot with the most important
        // info filled in (to prevent map breaking if
        // someone is currently editing spreadsheet)
        var theLatestSpot = findLatestCompleteSpot(gData)
        var latestSpot = Sheetsee.ich.latestSpot({
            rows: theLatestSpot
        })
        // set it and pan to it
        $('#latestSpot').html(latestSpot)
        map.setView([theLatestSpot.lat, theLatestSpot.long], 14)

which is implicit, because the layer comes from Leaflet to Mapbox.

Unfortunately it looks like there is no option to get OS Api for Mapbox (only for Leaflet and OpenLayers) https://astuntechnology.github.io/osgis-ol3-leaflet/ol3/01-OSGB-MAP.html

apart from this plugin, that requires Python code invoke.

https://github.com/OrdnanceSurvey/os-mapbox-adapter

Can anybody help me to solve it? How can I incorporate Ordnance Survey to this map?

enter image description here

  • Looking at this you need to use the PROJ4 js library example> rob-murray.github.io/os-leaflet – Mapperz Nov 21 at 16:54
  • I don't think so. As the code contains: var map = Sheetsee.loadMap("map") Sheetsee.addTileLayer(map, 'jllord.n7aml2bc') I believe, that is associated with sheetsee.js library and cannot be changed. – Mariusz Krukar Nov 22 at 10:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.