Google maps location , longitude , longitude in MVC without Map display

I have a nested object of address inside presented model of the view
At the View page I add the js functionality of google maps services

http://maps.googleapis.com/maps/api/js?key=GET_YOUR_KEY&sensor=false&libraries=places

function initialize() {
var input = document.getElementById(‘Address_Name’);
var options = {
componentRestrictions: { country: “il” }
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, ‘place_changed’, function () {
var place = autocomplete.getPlace();
console.log(JSON.stringify(place));
document.getElementById(‘Address_Name’).value = place.formatted_address;
document.getElementById(‘Address_Latitude’).value = place.geometry.location.lat();
document.getElementById(‘Address_Longitude’).value = place.geometry.location.lng();

});
}
google.maps.event.addDomListener(window, ‘load’, initialize);

 

@Html.LabelFor(model => model.Address.Name, htmlAttributes: new { @class = “control-label col-md-2” })

@Html.EditorFor(model => model.Address.Name, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessageFor(model => model.Address.Name, “”, new { @class = “text-danger” })

@Html.LabelFor(model => model.Address.Latitude, htmlAttributes: new { @class = “control-label col-md-2” })

@Html.EditorFor(model => model.Address.Latitude, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessageFor(model => model.Address.Latitude, “”, new { @class = “text-danger” })

@Html.LabelFor(model => model.Address.Longitude, htmlAttributes: new { @class = “control-label col-md-2” })

@Html.EditorFor(model => model.Address.Longitude, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessageFor(model => model.Address.Longitude, “”, new { @class = “text-danger” })

 

And that’s what you get

 

The json of the response is very rich

 

 

Enjoy

 

 

 

Advertisements

Getting images byte[] from MS SQLServer through WCF to Ionic3 Angular4

Image

So , that was quite a challenge.

After saving the images as byte[] pretty neat through the MVC client into the MS SqlServer , I wanted to get them into the app of Ionic3 with Angular4 ..

 

The problem was –

Well there were several problems –

1. How to return the data through the http without loosing data in “translation” on the way ?

Solution is in C# WCF before returning it convert to base64 – it will send the data intact through the www traffic.

dto.Logo = Convert.ToBase64String(dal.Logo);

       2.   When we get the data – we need to translate it into the image again :

this post helped me –  Search for the comment with 400 upvotes!

So, in my ts client side – my Ionic3 Angular4 baby ,  I added a function translating the byte[] into a Blob.

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn’t necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user’s system.

b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || ”;
sliceSize = sliceSize || 512;

let byteCharacters = atob(b64Data);
let byteArrays = [];

for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
let slice = byteCharacters.slice(offset, offset + sliceSize);

let byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}

let byteArray = new Uint8Array(byteNumbers);

byteArrays.push(byteArray);
}

let blob = new Blob(byteArrays, {type: contentType});
return blob;
}

3. Now I started getting those messages from Chrome 

unsafe:blob:http://localhost:8100/55df97ad-0b55-4724-8a4f-83861b87e60a:1 GET unsafe:blob:http://localhost:8100/55df97ad-0b55-4724-8a4f-83861b87e60a net::ERR_UNKNOWN_URL_SCHEME

 

So I’ve built a pipe as suggested here  in compbination with the DomSanitation suggested here :

So at last I have taken this solution :

import { Pipe } from ‘@angular/core’;

import { Pipe } from ‘@angular/core’;

import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from ‘@angular/platform-browser’;
@Pipe({ name: ‘safe’})

export class SafePipe {
constructor(protected _sanitizer: DomSanitizer) {
}
public transform(value: string, type: string = ‘html’): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {

switch (type) {

case ‘html’: return this._sanitizer.bypassSecurityTrustHtml(value);

case ‘style’: return this._sanitizer.bypassSecurityTrustStyle(value);

case ‘script’: return this._sanitizer.bypassSecurityTrustScript(value);

case ‘url’: return this._sanitizer.bypassSecurityTrustUrl(value);

case ‘resourceUrl’:

return this._sanitizer.bypassSecurityTrustResourceUrl(value);

default: throw new Error(`Invalid safe type specified: ${type}`);

}

}
}

 

Added it to declarations in your app.module.ts with class name SafePipe .

And added the pipe on the html template

<img [src]=”company.LogoImage | safe: ‘resourceUrl'”>

And here I am – after two days without sleep I have images from the server side in my app..

   

Now it’s just about vise-versa – trying to upload those slippery brothers  🙂

Why the apps gets uninstalled ? – because of “TOO MUCH”..

Such an obvious but yet so important question, that always make product managers minds work around the clock :

Well, Yael Wagner who is a Director of Product at FICO and defines herself as  Tenacious Product Maestro answers that on a SILO  network with a short mantra of don’t dos in two words slogan :

“TOO MUCH”!!

Just loved it!

So what is too much ?

Apparently , the apps that are getting uninstalled are the ones that:

1. Consume too much battery.
2. Send too many reminders, updates, alerts.
3. Release updates too often.
4. Crashes too often; and…
5. Gets me too hooked.
6. Apps that require too much time/effort to figure out. “It’s the UX, [stupid]!” If the journey to the happy place of mastering the app is too complicated, unclear.
7. For freemium apps: forcing the “but there’s more” too often, too pushy [and requiring too many clicks to exit the “buy more” loop.
8. Still on freemium: too much, too frequent “rate me, please rate me. aren’t you having so much fun with me? please rate me.”

Sounds just so correct and out of the field experience.

What would you add?

All the credit to the wise – https://www.linkedin.com/in/yaelwagner/

Activate MongoDB from one bat file

Image

• Put this code in your bat file
• It’ll start and activate the mongodb in 2 different admin privileged cmd windows.
• Please check the paths before to adjust to your environment.

START “runas /user:administrator” cmd /K “cd C:\Program Files\MongoDB\Server\3.4\bin & mongod.exe –dbpath c:\data\db”

TIMEOUT /T 10 START

START “runas /user:administrator” cmd /K “cd C:\Program Files\MongoDB\Server\3.4\bin & mongo.exe “

Ionic3 – Angular4 Super starter change language

Image

 

So I’ve started with Super starter for ionic angular template.

 

The problem was it was only english also it had i18n globalization multi lingual plugin

So I’ve found this and perfected it just a bit.

 

In ..\WebstormProjects\ionic3-angular4\src\pages\tutorial\tutorial.html

Added buttons getting the param of the language wanted :

<ion-header no-shadow>
  <ion-navbar>
    <ion-buttons end >
      <button ion-button (click)="translateTo('he')" color="primary">He</button>
    </ion-buttons>

    <ion-buttons end >
      <button ion-button (click)="translateTo('ru')" color="primary">Ru</button>
    </ion-buttons>

    <ion-buttons end >
      <button ion-button (click)="translateTo('he')" color="primary">He</button>
    </ion-buttons>


    <ion-buttons end *ngIf="showSkip">
      <button ion-button (click)="startApp()" color="primary">{{ 'TUTORIAL_SKIP_BUTTON' | translate}}</button>
    </ion-buttons>


  </ion-navbar>
</ion-header>

 

And in ..\WebstormProjects\ionic3-angular4\src\pages\tutorial\tutorial.ts

I’ve encapsulated the code of  initialization for reuse when the button is hit, so actually all I am doing is reinitializing the language and saying to translate provider want language to use using the parameter I’ve got from clicking the button.

constructor(public navCtrl: NavController, public menu: MenuController, public translate: TranslateService) {

  this.initTranslate();
}

initTranslate(){
  this.translate.get(["TUTORIAL_SLIDE1_TITLE",
    "TUTORIAL_SLIDE1_DESCRIPTION",
    "TUTORIAL_SLIDE2_TITLE",
    "TUTORIAL_SLIDE2_DESCRIPTION",
    "TUTORIAL_SLIDE3_TITLE",
    "TUTORIAL_SLIDE3_DESCRIPTION",
  ]).subscribe(
    (values) => {
      console.log('Loaded values', values);
      this.slides = [
        {
          title: values.TUTORIAL_SLIDE1_TITLE,
          description: values.TUTORIAL_SLIDE1_DESCRIPTION,
          image: 'assets/img/ica-slidebox-img-1.png',
        },
        {
          title: values.TUTORIAL_SLIDE2_TITLE,
          description: values.TUTORIAL_SLIDE2_DESCRIPTION,
          image: 'assets/img/ica-slidebox-img-2.png',
        },
        {
          title: values.TUTORIAL_SLIDE3_TITLE,
          description: values.TUTORIAL_SLIDE3_DESCRIPTION,
          image: 'assets/img/ica-slidebox-img-3.png',
        }
      ];
    });
}

translateTo(lang){
  this.translate.use(lang);
  this.initTranslate();
}

 

That easy. Now you are ready for the global world. 🙂

 

 

 

 

 

 

40 Productivity Hacks

Image

Google maps april’s fool pranks 2017

1. As always for 1 of April Google geeks are comping up with different guffy stuff to make us smile.

 

Today, as you go out to get some Friday beer, navigate through Google Maps.

 

You can see the Pacman button near drive to button.

 

Randomly, Google maps will choose some area on the global map and change the map to Pacman game.

 

Try It!

If you did, please, like this post.