Javascript

Manage jQuery in IE8 with bower

Here’s a quick way of using up to date jQuery whilst still supporting IE8.

In ASP.NET MVC Razor

    <!--[if IE 8 ]>
    @Scripts.Render("~/bower_components/jquery-legacy/dist/jquery.min.js")
    <![endif]-->
    <!--[if (gt IE 9)|!(IE)]>
    @Scripts.Render("~/bower_components/jquery-modern/dist/jquery.min.js")
    <![endif]-->

In your bower.json

    "dependencies": {
      "bootstrap": "~3.3.5",
      ...,
      "jquery-legacy": "jquery#^1",
      "jquery-modern": "jquery#^2"
    }

Why should I use Bower?

What is Bower?

Bower is a package manager for front-end frameworks.

Why should I use Bower?

It’s arguably simpler to use Bower as your package manager for front-end development than to use NuGet.

  • It can create a bower.json file that lists all of your dependencies.
  • It’s easily driven from the command line.
  • It separates out the concerns of the front-end from those of the back-end.

Of great benefit is it’s a single point of access to thousands of front-end packages that just aren’t available as NuGet packages. Previously you would have had to download and install the Javascript and the CSS. The process would have varied from project to project and there was no obvious upgrade path to the latest versions.

Starting with ASP.NET 5.0 there will be no more NuGet packages for front-end frameworks like Twitter Bootstrap. Microsoft currently create these packages using Bower but will now be expecting you to tool up with Bower yourself. Might as well get started early.

How do I use Bower?

This gets a bit gnarly, mainly because we’re behind a corporate proxy that expects authentication and tools like npm and bower aren’t clued up about that. You need to set up a proxy server locally to handle NTLM authentication. I’ve been successful with CNTLM.

  • set up CNTLM
  • install node (.msi)
  • set up .npmrc
  • $ npm install -g npm
  • ensure %appdata%\npm is before %ProgramFiles%\nodejs in the PATH
    (npm wiki: upgrading-on-windows)
  • $ npm install -g bower
  • set up .bowerrc
  • $ bower install bootstrap

You can now reference your bower_components directly from your includes or you can configure a Gulp/Grunt build.

Where do I find out more?

Bower
Introducing Gulp, Grunt, Bower, and npm support for Visual Studio

Geocode accuracy with UK postcodes and Google APIs

Using the Google APIs is entirely painless so if I need a map in a web app that’s where I’ll start.

I had a list of hotels I wanted to display and instead of looking up the latitude and longitude of each of them by hand I thought I’d use the google.maps.ClientGeocoder functionality. A bit of quick, scruffy code later and it’s looking them all up and putting the markers on the map but not where I expected.

I discovered that the postcodes are being truncated in the search, cutting off the last two letters. This seriously degrades the accuracy of each marker’s placement and many of the markers ended up on top of each other. The reason is probably the cost to Google of licensing the data from the Post Office. Fair enough but I was most of the way to my solution. There’s a simple workaround, however, do your lookup through the Google Search API’s LocalSearch class and pull the lat and lng from that. Bonzer.

In the code below look for the reference to localSearch in the newMarker function.


<html>
<head>
    <script src=”http://www.google.com/jsapi?key=<<INSERT API KEY HERE>>”></script>
    <script type=”text/javascript”>
    google.load(”maps”, “2″,{”other_params”:”sensor=false”});
    google.load(”search”, “1″);
    </script>
    <script type=”text/javascript”>

    var map;
    function loadMap() {
      if (google.maps.BrowserIsCompatible()) {
        map = new google.maps.Map2(document.getElementById(”map”));
        var house = new google.maps.LatLng(52.742844, -0.406194);
        map.setCenter(house, 10);
        var marker = new google.maps.Marker(house, { title: “Venue” });
        map.addOverlay(marker);
        map.addControl(new google.maps.SmallMapControl());
        addBeds();
      }
    }
    function addBeds() {
        var ch = [ 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U' ];
        var name = [ 'The George Hotel', 'Bridge House', 'Dormy House', 'Mill House', 'Maycroft Cottage', 'The Wishing Well Inn', 'Willoughby Arms', 'The Royal Oak Inn', 'The Baskervilles Hotel', 'Lady Annes Hotel', 'The Garden House Hotel', 'The Crown Hotel', 'The Bull and Swan', 'The Griffin Inn', 'The Oak Inn', 'Rock Lodge', 'The Royal Oak Inn', 'Travelodge Hotel', 'The Dolphin Guest House', 'Lindsey Cottage' ];
        var address = [ 'PE9 2LB', 'PE10 0JT', 'PE10 9EZ', 'PE10 9BU', 'PE10 0RB', 'PE10 0AF', 'NG33 4RA', 'NG33', 'Baston', 'PE9 2LJ', 'PE9 2LP', 'PE9 2AG', 'Stamford', 'NG33 4JG', 'pe9 3pa', 'PE9 2RH', 'Duddington, Stamford', 'NG33 5JR', 'PE9 1QD', 'Uffington, Stamford' ];
        var base = “http://www.google.com/mapfiles/marker”;
        for (var i = 0; i < ch.length; ++i) {
            var icon = new google.maps.Icon(G_DEFAULT_ICON);
            icon.image = base + ch[i] + “.png”;
            newMarker(address[i], name[i], icon);
        }
    }
    function newMarker(address, name, icon) {
        // ref: http://www.tomanthony.co.uk/blog/geocoding-uk-postcodes-with-google-map-api/
        var localSearch = new GlocalSearch();
       
        localSearch.setSearchCompleteCallback(null, function() {   
            if (localSearch.results[0]) {
                var lat = localSearch.results[0].lat;
                var lng = localSearch.results[0].lng;
                console.info( address + ” = ” + lat + “, ” + lng );
                var point = new google.maps.LatLng( lat, lng );
                var marker = new google.maps.Marker(point, { icon: icon, title: name });
                map.addOverlay(marker);
            } else {
                console.warn( address + ” not found” );
            }
        });
       
        localSearch.execute( address + “, UK” );
    }
    google.setOnLoadCallback(loadMap);


</script>
</head>
<body onunload=”google.maps.Unload()”>
    <div id=”map” style=”width:300px; height:420px;”>Loading…</div>
</body>
</html>

Technorati Tags: